chessboardjs的Typescript声明文件（隐式导入）

Question

Hoping to create a few declaration files for DefinitelyTyped (So I want to make sure they are top quality).

The next lib I am taking on is https://github.com/oakmac/chessboardjs/ . I actually have it working if I import it like so

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

and now i can use the lib by calling

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

The problem is i want the import statement to be implicit (ES6 style) and not sure how to go by doing that

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

I would like some guidance on how to go by doing this if possible. As I'm still new to typescript and declaration files, maybe the lib just isn't built for implicit imports

This is what i have so far in the index.d.ts file

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;
}

Thank you!!!

Answer 1

It doesn't work like this. The definition file describes how the library works.

This

import * as ChessBoard from "chessboardjs"

and this

import ChessBoard from "chessboardjs"

and this

import { ChessBoard } from "chessboardjs"

each mean three very different things at runtime. Almost certainly only one of them works. If you have a working import, you shouldn't be touching the definition file at all. It's just going to break at runtime.