Chessboard.js的Typescript声明文件(隐式导入) [英] Typescript declaration file for chessboardjs (implicit import)

问题描述

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

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

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

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

现在我可以通过调用来使用lib了

and now i can use the lib by calling

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

问题是我希望import语句是隐式的(ES6风格)，并且不确定这样做怎么做

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

如果可能的话，我希望获得有关如何执行此操作的一些指导.由于我仍然对打字稿和声明文件还不熟悉，所以也许lib并不是为隐式导入而构建的

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

这是我到目前为止在index.d.ts文件中拥有的

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

谢谢！

推荐答案

它不能像这样工作.定义文件描述库的工作方式.

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

此

import * as ChessBoard from "chessboardjs"

还有这个

import ChessBoard from "chessboardjs"

还有这个

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.

这篇关于Chessboard.js的Typescript声明文件(隐式导入)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！