如何在输出类的NPM模块中添加打字稿类型?

时间:2017-11-14 07:24:40

标签: javascript typescript types typescript-typings

我希望我的design-systems-utils模块包含Typescript类型,即使源代码不是使用Typescript编写的(我已经看到其他人已经这样做了)。

我已经尝试了这个here,但它不起作用。顺便说一下,我的模块导出了一个类......

declare class DesignSystem {
    constructor(system: object, options?: object);
    multiply(initial: number, multiplier: number): any;
    get(val: string): any;
    bp(bp: string): any;
    z(z: string): any;
    fontSize(size: string|number, toPxl?: boolean): string;
    fs(size: string|number, toPxl?: boolean): string;
    spacing(index: number): string;
    space(index: number): string;
    toPx(value: number, base: number, unit?: string): string;
    pxTo(value: number, base: number): string;
    color(hue:string, value:string): string;
    designSystem: object;
    interface options {
        defaultUnit: string,
        useModularScale: boolean,
        fontSizeUnit: string
    }
}

我还看到我应该将其作为模块导出,如下所示:

declare module "DesignSystem" {
    export default class DesignSystem {
        constructor(system: object, options?: object);
        /*~ Multiply two items together */
        multiply(initial: number, multiplier: number): any;
        get(val: string): any;
        bp(bp: string): any;
        z(z: string): any;
        fontSize(size: string|number, toPxl?: boolean): string;
        fs(size: string|number, toPxl?: boolean): string;
        spacing(index: number): string;
        space(index: number): string;
        toPx(value: number, base: number, unit?: string): string;
        pxTo(value: number, base: number): string;
        color(hue:string, value:string): string;
        designSystem: object;
    }
}

但这也行不通。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

原则上:

declare module "DesignSystem" { ...}

应更改为npm模块的名称:

declare module "design-systems-utils" { ...}

这就是你告诉打字稿的方式“以下是用户从'design-systems-utils''导入时的类型。”当您需要从“外部”扩展库类型时,这非常有用。

但是,由于你的package.json有types: src/index.d.ts字段,我们甚至不需要它。 Typescript已经知道你的d.ts文件为哪个库提供了定义。

export default class DesignSystem {...}

应该足够了。

您的第一次尝试声明了名为DesignSystem的全局类。一般的经验法则是你的d.ts应该反映你的结构。因此,如果您从js文件执行export default,也可以从d.ts

执行此操作

(另外,感谢为您的图书馆提供定义,让世界变得更美好)