Question

我正在使用Typescript和React。虽然许多反应组件已经带有预定义的类型，但其中一些没有。定义*.d.ts文件并将其放入typings目录不是一个大问题。但是，在JavaScript中，有许多方法可以在模块中导出内容，而且它绝不是统一的。结果是Typescript编译器对我的打字感到满意，但是当我使用typescript import语句进行输入时，我在运行时得到undefined。

有人可以澄清如何为反应组件编写正确的*.d.ts文件吗？特别是，如果原始的无类型JavaScript文件，如何在export文件中声明*.d.ts语句......

...使用export class XYZ？
...使用export default class XYZ？
...使用export namespace XYZ？
...使用export default namespace XYZ？
...使用module.exports？

这里有一些很多的可能性，某种“烹饪食谱”会很好，即“首先，如果X在运行时给你undefined，总是尝试方法X ，试试Y ......“。

Answer 1

Typescript不知道通过JS导入的模块。因此，您需要声明模块，然后声明其导出的成员。

您可以在他们的源文件中或多或少地声明您的全局定义文件中的成员。由于我们仅在此处讨论模块，因此我们将跳过环境上下文并专注于模块。

具有命名组件的模块

给定名为view/alpha.js的文件，内容为：

export class Alpha {
    howdy() {}
}

OR

class Alpha {
    howdy() {}
}

module.exports = {
    Alpha: Alpha;
}

在定义文件中声明模块：

declare module 'view/alpha' {
    class Alpha {
        howdy() : void;
    }
}

具有默认导出的模块

给定名为view/beta.js的文件，内容为：

export default class Beta {
    howdy() {}
}

在定义文件中声明模块：

declare module 'view/beta' {
    export = class Beta {
        howdy();
    }
}

具有默认和其他导出的模块

给定名为view/epsilon的文件，内容为：

export default class Epsilon {
    howdy() {}
}

export class Zeta {
    howdy() {}
}

声明模块：

declare module 'view/epsilon' {
    export default class Epsilon {
        howdy() : void;
    }

    class Zeta {
        howdy() : void;
    }
}

您提到：

export default namespace XYZ
export namespace XYZ

这无效ES6。如果您指的是export Delta，其中Delta包含命名类，那么您将其声明为：

declare module 'view/gamma' {
    namespace Delta {
        class Omega {
            howdy() : void;
        }
    }
}

否则，你可以链接一个例子吗？我试过谷歌搜索export default namespace，但没有得到任何非打字稿的例子。

如何正确定义纯JavaScript反应组件的{.d.ts（typings）文件

1 个答案:

具有命名组件的模块

具有默认导出的模块

具有默认和其他导出的模块