如何从现有的JavaScript库生成.d.ts"typings"定义文件？

Question

我使用了很多我自己和第三方的图书馆.我看到"typings"目录包含一些用于Jquery和WinRT ......但它们是如何创建的？

Answer 1

根据所涉及的库,它的编写方式以及您正在寻找的准确度,有几种选择可供选择.让我们按需要的大致降序来审查选项.

也许它已经存在

始终首先检查DefinitelyTyped(https://github.com/DefinitelyTyped/DefinitelyTyped).这是一个完整的数千个.d.ts文件的社区回购,很可能你正在使用的东西已经存在.您还应该检查TypeSearch(https://microsoft.github.io/TypeSearch/),它是NPM发布的.d.ts文件的搜索引擎; 这将比DefinitelyTyped稍微多一些定义.一些模块也将自己的定义作为NPM发行版的一部分进行发布,因此在尝试编写自己的模块之前,还要看看是否属于这种情况.

也许你不需要一个

TypeScript现在支持该--allowJs标志,并将在.js文件中进行更多基于JS的推断.您可以尝试在编译中包含.js文件以及--allowJs设置,以查看它是否为您提供了足够好的类型信息.TypeScript将识别这些文件中的ES5样式类和JSDoc注释之类的内容,但如果库以奇怪的方式初始化,则可能会被绊倒.

开始使用 --allowJs

如果--allowJs给你不错的结果,并且你想自己编写一个更好的定义文件,你可以结合--allowJs使用--declaration来查看TypeScript对库类型的"最佳猜测".这将为您提供一个不错的起点,如果JSDoc注释编写良好且编译器能够找到它们,则可能与手工编写的文件一样好.

开始使用dts-gen

如果--allowJs不起作用,您可能需要使用dts-gen(https://github.com/Microsoft/dts-gen)来获得起点.此工具使用对象的运行时形状来准确枚举所有可用属性.从好的方面来说,这往往非常准确,但该工具还不支持抓取JSDoc注释来填充其他类型.你这样运行:

npm install -g dts-gen
dts-gen -m <your-module>

这将your-module.d.ts在当前文件夹中生成.

点击贪睡按钮

如果您只是想稍后再进行操作并暂时不使用类型,那么在TypeScript 2.0中,您现在可以编写

declare module "foo";

这将让你import的"foo"模块与类型any.如果你想要在以后处理全局,那就写吧

declare const foo: any;

这将给你一个foo变量.

Answer 2

您可以使用tsc --declaration fileName.ts像瑞安介绍,也可以指定declaration: true下compilerOptions你tsconfig.json假设你已经有一个tsconfig.json项目下.

Answer 3

处理此问题的最佳方法(如果在DefinitelyTyped上没有声明文件)是仅为您使用的内容而不是整个库编写声明.这大大减少了工作 - 此外,编译器还可以通过抱怨缺少方法来帮助解决问题.

Answer 4

正如Ryan所说,tsc编译器有一个从文件--declaration生成.d.ts文件的开关.ts.另请注意(除了错误)TypeScript应该能够编译Javascript,因此您可以将现有的javascript代码传递给tsc编译器.

Answer 5

创建自己的库时，您可以*.d.ts使用tsc(TypeScript Compiler) 命令创建文件， 如下所示：（假设您正在将库构建到dist/lib文件夹中）

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d( --declaration): 生成*.d.ts文件
• --declarationDir dist/lib: 生成的声明文件的输出目录。
• --declarationMap：为每个相应的“.d.ts”文件生成一个源映射。
• --emitDeclarationOnly: 只发出 '.d.ts' 声明文件。（没有编译的JS）

（有关所有命令行编译器选项，请参阅文档）

或者例如在您的package.json：

"scripts": {
    "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}

然后运行：（yarn build:types或npm run build:types）

Answer 6

如http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript 00:33:52中所述,他们构建了一个工具,将WebIDL和WinRT元数据转换为TypeScript d.ts