如何将 @types/module 与为其编写类型的 npm 模块结合使用？答案

【问题标题】：how to use @types/module in combination with with npm module that types are written for?如何将 @types/module 与为其编写类型的 npm 模块结合使用？
【发布时间】：2018-06-21 06:05:48
【问题描述】：

这只是我项目中一些模块的示例。

npm 模块多标签有一个https://github.com/mapbox/polylabel TypeScript 类型定义。现在，当我安装 npm install --save @types/polylabel 时，我得到了类型，但是当我安装 npm install --save polylabel 时，我得到了自己的 npm 模块。

所以我的问题是如何导入 polylabel 但该模块使用来自该 @types/polylabel 的 TypeScript 类型定义？示例：

import polylabel from "polylabel";

export default class SomeClass extends Base {

   console.log(polylabel(coordinates, 1.0))
}

现在这将不起作用，因为 typescript 将尝试从模块中导入没有功能的定义函数。

我应该在 webpack it self 中包含模块 it self 还是有其他方法可以做到这一点？ Webpack 部分：

new webpack.ProvidePlugin({
  polylabel: 'polylabel'
}),

我希望这个问题清楚地表明我正在尝试/需要解决什么。

【问题讨论】：

只要你有你的 tsconfig 设置来引用@types 目录，它总是会使用可用的类型。有时 npm 包会与类型定义一起打包，但在很多情况下，它们不会。这时候你需要运行npn install @types/<module> --save-dev
@mwilson 这有点令人困惑，因为有很多 npm 包，然后是为它们编写的一堆类型，它们不包含在包中。并且经常发现模块本身的定义不是最新的。
@mwilson 你能把你的评论添加为答案吗？
是的。这是一个有趣的观点，因为类型与打字稿有关，并不是每个人都使用它。然而，随着向 ES6 的发展和使用 TypeScript 之类的东西，需求正在持续增长。在 TypeScript 设置中使用没有可用类型的东西绝对不受欢迎。您也可以结帐github.com/DefinitelyTyped/DefinitelyTyped

标签： javascript typescript npm

【解决方案1】：

只要您将tsconfig.json 设置为引用@types 目录，它就会始终使用可用的类型。有时 npm 包会与类型定义一起打包，但在很多情况下，它们不会。这时你需要运行npn install @types/<module> --save-dev

例如tsconfig.json:

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types" // <-- This guy
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "e2e"
  ]
}

【讨论】：