如何从现有的 JavaScript 库生成 .d.ts“打字”定义文件？

StackOverflow https://stackoverflow.com//questions/12687779

  •  12-12-2019
  •  | 
  •  

题

我使用了很多我自己的和第三方的库。我看到“typings”目录包含一些 Jquery 和 WinRT 的内容......但它们是如何创建的呢？

有帮助吗？

解决方案

根据相关库、其编写方式以及您想要的准确性级别，您可以选择一些选项。让我们大致按需求程度降序回顾一下这些选项。

也许它已经存在

始终检查DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped） 第一的。这是一个社区存储库，其中包含数千个 .d.ts 文件，并且您正在使用的东西很可能已经存在。您还应该检查 TypeSearch (https://microsoft.github.io/TypeSearch/) 这是 NPM 发布的 .d.ts 文件的搜索引擎；这将比DefinitelyTyped 具有更多的定义。一些模块也将自己的定义作为其 NPM 发行版的一部分提供，因此在尝试编写自己的定义之前，请先看看是否是这种情况。

也许你不需要一个

TypeScript 现在支持 --allowJs flag 并将在 .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 多变的。

其他提示

您可以使用 tsc --declaration fileName.ts 就像 Ryan 描述的那样，或者你可以指定 declaration: true 在下面 compilerOptions在你的 tsconfig.json 假设你已经有一个 tsconfig.json 在你的项目下。

处理此问题的最佳方式（如果在 demodityyped ）是仅为您使用而不是整个库的物品写入声明。这减少了很多工作 - 另外，编译器通过抱怨丢失的方法来帮助解决。

随着Ryan说，TSC编译器具有一个Switch --declaration，它从.d.ts文件中生成一个生成的世代odeTagcode文件。另请注意（禁止错误）打字标注应该能够编译JavaScript，因此您可以将现有的JavaScript代码传递给TSC编译器。

如 http：//channel9.msdn。COM / POSTS / ANDERS-HEJLSBERG-STEVE-LUCCO-AND-LUKE-HOBAN-INSION-CYSIONCTRES 在00:33:52，他们建立了一个工具，将WebIDL和WinRT元数据转换为类型签字D.TS

下面是一些 PowerShell，它创建一个包含多个 TypeScript 定义文件的库 *.js 使用现代 JavaScript 的文件。

首先，将所有扩展名更改为 .ts.

Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }

其次，使用TypeScript编译器生成定义文件。会有很多编译器错误，但我们可以忽略它们。

Get-ChildItem | foreach { tsc $_.Name  }

最后，结合所有 *.d.ts 文件合二为一 index.d.ts, ，删除 import 声明并删除 default 从每份出口声明中。

Remove-Item index.d.ts; 

Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
  foreach { Get-Content $_ } | `
  where { !$_.ToString().StartsWith("import") } | `
  foreach { $_.Replace("export default", "export") } | `
  foreach { Add-Content index.d.ts $_ }

这最终以一个可用的 index.d.ts 包含许多定义的文件。

我会寻找支持脚本＃或sharpkit的第三方JS库的现有映射。这些C＃的用户跨编译器将面临您现在面临的问题，可能已发布开源程序以扫描第三方lib并转换为骨架C＃类。如果是这样，请破坏扫描仪程序以生成类型签字代替C＃。

失败，将C＃Public接口翻译为第三方Lib进入CysemScript定义可能比读取源JavaScript的方式更简单。

我的特殊兴趣是Sencha的Extjs Ria框架，我知道已经发布了项目以生成脚本＃或sharpkit的c＃解释

创建自己的库时，您可以创建 *.d.ts 文件通过使用 tsc （TypeScript 编译器）命令如下：（假设您正在构建您的库 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)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top