在 TypeScript 文件中导入没有定义文件的 JS 库

在前端开发中，我们常常需要使用 JavaScript 的库来加速开发。这些库通常都是使用 JavaScript 编写的，但如果你正在使用 TypeScript，则可能会遇到一些问题。

当你尝试导入一个没有 TypeScript 定义文件（.d.ts）的 JavaScript 库时，TypeScript 可能无法正确推断出它的类型，并给出一些类型错误的提示，这使得导入和使用它变得更加困难。

下面是一些方法来解决这个问题：

方法1：手动编写类型定义文件

如果你花费一点时间来编写自己的类型定义文件，那么就可以告诉 TypeScript 如何解释这个库的 API 和类型。这样做需要一些深入的理解，但如果你想要完全掌握一个库，编写自己的类型定义可能是一个不错的选择。

有一些工具可以帮助你生成类型定义文件，例如 dts-gen 和 TypeScript-Declaration-File-Generator。使用这些工具可以快速生成类型定义文件，但仍需要手动编辑和调整。

以下是一个手动编写类型定义文件的示例：

declare module 'my-library' {
  export function myFunction(arg1: string, arg2: number): void;
  export const myVariable: number;
}

在这个例子中，我们定义了一个名为 my-library 的模块，并导出了它的 API。现在，当我们在 TypeScript 文件中导入这个库时，TypeScript 就可以正确理解它的类型并给出正确的代码提示。

方法2：使用 any 类型

如果你不想或者无法编写类型定义文件，那么可以使用 any 类型来解决这个问题。虽然这种方法可以正常工作，但是失去了 TypeScript 的类型检查和代码提示功能。

以下是一个使用 any 类型的示例：

import * as myLibrary from 'my-library';

const result: any = myLibrary.myFunction('argument', 42);
console.log(result.anyProperty); // no error, but may cause runtime errors

方法3：使用类型断言

如果你只需要导入该库中的部分 API 或属性，并且知道它们的类型，则可以使用类型断言来告诉 TypeScript 这些类型。

以下是一个使用类型断言的示例：

import { myFunction } from 'my-library';

const result = (myFunction as (arg1: string, arg2: number) => void)('argument', 42);

在这个例子中，我们使用类型断言将 myFunction 转换成了一个函数类型，从而让 TypeScript 知道它的参数类型和返回值类型。

总之，在导入没有定义文件的 JS 库时，手动编写类型定义文件、使用 any 类型或使用类型断言都是可行的方法。选择哪种方法取决于你的具体需求和情况。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/605433fe8d846479e750ad37