如何为 umd 库创建 TypeScript 定义文件 (d.ts)答案

【问题标题】：How to create TypeScript definition file (d.ts) for umd library如何为 umd 库创建 TypeScript 定义文件 (d.ts)
【发布时间】：2017-03-02 11:50:18
【问题描述】：

我正在开发图书馆 surveyjs

它使用 gulp+webpack 来构建 umd 包。

我想创建用于 typescript 项目的类型定义包（或者可能只是多个 d.ts 文件）。我想要这样的东西：

import * as Survey from 'surveyjs';

Survey.* 的所有内容如下所述： https://github.com/dmitrykurmanov/surveyjs/blob/master/src/entries/ko.ts

我曾尝试使用：github.com/SitePen/dts-generator 和 github.com/TypeStrong/dts-bundle 但没有成功，有人可以展示一下吗我的方向正确吗？

【问题讨论】：

uhm.. 你可以在 tscconfig.json 中配置 tsc 以输出声明以及使用 declaration 标志。
最后我们用 dts-bundle 实现了它

标签： typescript webpack definitelytyped umd

【解决方案1】：

您可以通过在 tsconfig.json 中添加 declaration 标志来要求 tsc 为您的代码生成声明文件。

在你的情况下是：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "sourceMap": true,
    "noImplicitAny": false,
    "jsx": "react",
    "declaration": true
  },
//  "filesGlob": [
  //    "typings/index.d.ts"
  //  ], // TODO
  "include": [
    "typings/index.d.ts",
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

【讨论】：

是的。 webpack-stream 输出中的问题。它只是 js 包，但我怎样才能获得 d.ts？所以我单独运行'gulp-typescript'编译器并生成d.ts。这不酷。
这在很大程度上取决于你的设置。如果你想要一个更具体的答案，你应该分享更多。
另外一个问题是bundle.d.ts。是否可以创建它？我发现了两个项目 github.com/TypeStrong/dts-bundle 和 github.com/SitePen/dts-generator 我配置它们失败了。有人有成功的例子吗？
@tokv，好的，我将创建另一个关于 webpack-stream 和 bundle.d.ts 的问题

【解决方案2】：

正如 toskv 提到的，您可以使用 tsc 来生成 .d.ts 文件。问题是编译器会创建多个声明文件，每个 .ts 文件一个。我工作的另一个项目也遇到了同样的问题。我通过为 webpack 创建一个小插件来解决它，该插件合并 tsc 生成的 .d.ts 文件。

您可以在这里查看：https://www.npmjs.com/package/typescript-declaration-webpack-plugin

【讨论】：