javascript - chessboardjs 的 Typescript 声明文件(隐式导入)

Question

希望为DefinitelyTyped 创建一些声明文件(所以我想确保它们是顶级质量)。

我要处理的下一个库是 https://github.com/oakmac/chessboardjs/ 。如果我像这样导入它，我实际上可以正常工作

// WHAT WORKS
import * as ChessBoard from "chessboardjs";

现在我可以通过调用来使用该库

const board = ChessBoard('board1', 'start');

问题是我希望 import 语句是隐式的(ES6 风格)并且不知道如何执行

// WHAT I WOULD LIKE
import { ChessBoard } from "chessboardjs";

如果可能的话，我想要一些关于如何执行此操作的指导。由于我对 typescript 和声明文件还很陌生，也许该库不是为隐式导入而构建的

这是我迄今为止在index.d.ts 文件中的内容

declare namespace ChessBoardJS {
    interface BoardConfig {
        onDrop?: Function;
        draggable?: boolean;
        onChange?: Function;
        onMoveEnd?: Function;
        onSnapEnd?: Function;
        sparePieces?: boolean;
        onDragMove?: Function;
        showNotation?: boolean;
        onDragStart?: Function;
        onSnapbackEnd?: Function;
        onMouseoutSquare?: Function;
        onMouseoverSquare?: Function;
        pieceTheme?: string | Function;
        orientation?: ChessBoardJS.Types.OrientationType;
        showErrors?: boolean | string | Function;
        moveSpeed?: number | ChessBoardJS.Types.SpeedType;
        snapSpeed?: number | ChessBoardJS.Types.SpeedType;
        trashSpeed?: number | ChessBoardJS.Types.SpeedType;
        dropOffBoard?: ChessBoardJS.Types.DropOffBoardType;
        appearSpeed?: number | ChessBoardJS.Types.SpeedType;
        snapbackSpeed?: number | ChessBoardJS.Types.SpeedType;
        position?: ChessBoardJS.Types.PositionType | string | object;
    }
}

declare namespace ChessBoardJS.Types {
    type PositionType = 'start';
    type PositionFenType = 'fen';
    type SpeedType = 'slow' | 'fast';
    type OrientationFlipType = 'flip';
    type OrientationType = 'white' | 'black';
    type DropOffBoardType = 'snapback' | 'trash';
}

interface ChessBoardInstance {
    clear(useAnimation?: boolean): void;
    destroy(): void;
    fen(): string;
    flip(): void;
    move(...args: string[]): object; // *FIND RETURN*
    position(newPosition: object | string | ChessBoardJS.Types.PositionType, useAnimation?: boolean): void
    position(fen?: ChessBoardJS.Types.PositionFenType): string | object;
    orientation(side?: ChessBoardJS.Types.OrientationType | ChessBoardJS.Types.OrientationFlipType): string;
    resize(): void;
    start(useAnimation?: boolean): void;
}

interface ChessBoardFactory {
    (containerElOrId: any, config: ChessBoardJS.BoardConfig): ChessBoardInstance
    fenToObj(fen: string): any;
    objToFen(obj: any): any;
}

declare var ChessBoard: ChessBoardFactory;
declare module "chessboardjs" {
    export = ChessBoard;
}

谢谢!!!

Answer 1

它不是这样工作的。定义文件描述该库的工作原理。

这个

import * as ChessBoard from "chessboardjs"

还有这个

import ChessBoard from "chessboardjs"

还有这个

import { ChessBoard } from "chessboardjs"

每个在运行时都意味着三个截然不同的事情。几乎可以肯定，只有其中之一有效。如果您有有效的导入，则根本不应该触及定义文件。它只会在运行时中断。