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

时间:2017-04-18 20:58:04

标签: javascript angular typescript npm typescript-typings

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

我正在接受的下一个lib是https://github.com/oakmac/chessboardjs/。如果我像这样导入它,我实际上有它工作

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

现在我可以通过调用

来使用lib
const board = ChessBoard('board1', 'start');

问题是我希望import语句是隐式的(ES6样式)而不确定如何去做

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

如果可能的话,我想就如何做到这一点提供一些指导。由于我还是打字稿和声明文件的新手,也许lib不是为隐式导入而构建的

这是我目前在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;
}

谢谢!!!

1 个答案:

答案 0 :(得分:0)

它不会像这样工作。定义文件描述了库的工作方式。

import * as ChessBoard from "chessboardjs"

和这个

import ChessBoard from "chessboardjs"

和这个

import { ChessBoard } from "chessboardjs"

每个在运行时意味着三个非常不同的东西。几乎可以肯定,其中只有一个有效。如果您有工作导入,则根本不应该触摸定义文件。它只会在运行时中断。