在 TypeScript webpack 项目中使用 JavaScript npm 包答案

【问题标题】：Using a JavaScript npm package in a TypeScript webpack project在 TypeScript webpack 项目中使用 JavaScript npm 包
【发布时间】：2021-08-02 10:18:26
【问题描述】：

我想在我的项目中使用JavaScript package cesium-navigation（通过npm 和node 安装）。但是，我的项目使用 webpack 和 TypeScript 而不仅仅是普通的 JavaScript。包本身在 npm 存储库中不可用，这意味着它不能使用 npm install 'packageNameHere' --save；此外，在该包中使用 javascript 意味着不存在可用于 TypeScript 的类型。

如何调整这个包以在 TypeScript、webmodules 环境中使用？每次我想使用它时都必须手动安装它吗？

【问题讨论】：

你试过直接从github安装模块吗？如果我理解你的问题，那就足够了
@MarcinWosinek 如何将其集成到 webpack 项目中？我不确定如何直接从 github 安装它，因为它需要绑定到 webpack 项目（并且也以这种方式导入到 typescript 文件中）
@MarcinWosinek 可能是指使用npm install --save git+https://github.com/alberto-acevedo/cesium-navigation.git 安装（详细here）。
@samthecodingman 我刚才尝试用这种方式安装，但安装过程一开始就一直挂在idealTree: timing arborist:ctor Completed in 1ms 上。从来没有比这更进一步
仅仅因为自述文件中提到yarn 并不能阻止您使用npm，在大多数情况下它们是可以互换的。

标签： javascript typescript npm webpack

【解决方案1】：

添加一个名为types.d.ts 的文件并声明模块。

declare module "Cesium";

您还可以声明all of the available 选项和类型。您可能需要重新启动 typescript 以便选择新类型。

如果您使用 Visual Studio Code - 将鼠标悬停在导入语句上，它会告诉您在 types.d.ts 文件中放入什么。

【讨论】：

Cesium 是一个不同的库，不幸的是，cesium-navigation 使用它来工作。我将在哪里安装 npm 包，以便能够利用 types.d.ts？每次我想使用它时都必须手动安装它吗？
您在源目录中添加一个名为“types.d.ts”的文件并添加上面的代码 - 您可能需要将模块名称从“cesium”更改为它在库中引用的名称也许是“铯”。无论安装方式如何，您都必须添加它，因为第 3 方源中没有类型定义。您可以自己打包源代码并创建类型，但只定义模块会更简单。
抱歉，澄清一下 - 我已经通过 npm 存储库和 webpack 安装了 cesium，我也想使用 cesium-navigation，这在 npm 存储库中不可用。我想您的步骤也与cesium-navigation 相关？
是的，一般来说，这就是如何在 TS 环境中使用没有类型的 JS 库而不会出现一堆 TS 错误。库的安装方式无关紧要。您也许可以为 cesium 安装 @types/cesium，然后像上面那样为 cesium-navigation 定义一个模块，让您的生活更轻松。