在 TypeScript 引入外部 js 库时的注意事项
TypeScript 是一种强类型语言，其最大的好处之一就是可以在编写代码的同时检测出潜在的类型错误。不过，即使在 TypeScript 的世界中，我们仍然需要使用大量的开源 JavaScript 库来完成各种任务。在 TypeScript 项目中引入外部 JavaScript 库时，有一些需要注意的事项。
- 安装和类型声明
在引入外部 JavaScript 库时，通常需要先安装这个库的依赖包。使用 npm 命令或者 yarn 命令进行安装很容易，但是这仅仅完成了库的安装。在 TypeScript 项目中使用外部库需要使用类型声明文件（.d.ts），来告诉 TypeScript 库中包含的对象和函数的类型。如果类型声明文件不存在，TypeScript 编译器将无法完整地检查你的代码。
许多常见的 JavaScript 库都有所谓的 “@types” 包，这些包包含这些库的类型声明。开发者可以使用 npm 或 yarn 来安装这些包，然后编写的代码就可以使用这些库的类型检查。
另外，有一些工具可以生成类型声明文件，例如 dts-gen 和 tsc，它们可以根据 JavaScript 库的源代码生成类型声明文件。但是，这些工具生成的类型声明文件可能不太完整或不准确，所以手动编写类型声明文件是更好的选择。
- 全局变量
全局变量是在所有程序中可用性的变量，但是使用全局变量会降低 TypeScript 的类型安全性，因为 TypeScript 编译器无法检查全局变量的类型。在外部 JavaScript 库中，开发者可能使用全局变量来实现某些功能，这就需要开发者手动编写类型声明文件。
例如，当希望在 TypeScript 项目中使用 jQuery 或者 lodash 这样的库时，开发者必须手动告诉 TypeScript，这些库中的内容是可以全局访问的，并且声明它们在 TypeScript 中的类型。
下面是一个使用全局 lodash 变量的示例代码：
const min = _.min([1, 2, 3, 4]); console.log(min);
在 TypeScript 中，上述代码的类型声明文件定义如下：
-- -------------------- ---- ------- ------- ------ - --------- ------------ - ---- ------------------------- - --------- ----------------- - ---- ------- -------------------------------- -- ---- - ----- -- ------------- -展开代码
使用上述代码定义，TypeScript 编译器就可以正确地检查程序中对 lodash 的使用，同时还可以提供代码提示和自动补全功能，这可以帮助开发者更好地进行编码。
- 模块导出
在 JavaScript 库中，开发者通常使用模块系统来导出库中的变量和函数。在 TypeScript 中，也可以使用模块来组织代码，并通过模块导入和导出来实现代码的复用。但由于 JavaScript 和 TypeScript 的模块系统不同，因此在使用时需要进行一些额外的考虑。
例如，在 TypeScript 项目中使用的 React 库是一个使用 ES6 模块系统的 JavaScript 库。在导入 React 模块时，开发者需要编写以下代码：
import * as React from 'react';
其中的 import 语句使用了 ES6 的语法，导出语句使用了 CommonJS 语法。
当 TypeScript 项目中引入的 JavaScript 库使用 CommonJS 模块系统导出变量和函数时，则使用以下代码：
import * as _ from 'lodash';
上述代码中的 import 语句使用 CommonJS 语法，这是因为 lodash 使用 CommonJS 模块系统进行导出。
在这里，需要注意的是，TypeScript 支持使用多种不同的模块系统，例如 CommonJS、AMD、SystemJS、ES6 等。开发者在编写代码时需要谨慎选择并使用正确的模块系统，同时导出类型信息也需要按照相应的模块系统导出类型信息。
- 类型转换
在 TypeScript 中，有时需要将外部 JavaScript 库中的特定类型转换为 TypeScript 中的类型。对于简单的类型，类型转换通常很容易实现，可以使用 TypeScript 的类型断言语法来实现。
例如，在使用 jQuery 库时，可能需要获取某个 DOM 元素的 jquery 对象，代码如下：
const element = $('#id');
上述代码中，$('#id') 返回的是 jQuery 对象，而这个对象在 TypeScript 中没有定义。因此，需要进行类型转换。这也是最常见的类型转换：
const element = $('#id') as JQuery<HTMLElement>;
这种类型转换方式存在一些问题。一方面，它需要开发者自己确定转换类型，这可能会带来类型安全性问题；另一方面，如果 TypeScript 和库的定义不匹配，则可能会导致编译错误。因此，尽可能地使用类型声明文件，以确保代码的类型安全性。同时，可以使用一些更通用的方式来处理类型转换，例如将外部 JavaScript 库对象包装在类型安全的对象中。
以上是在 TypeScript 引入外部 JavaScript 库时，需要注意的几个注意事项。TypeScript 具有强类型和便捷性的优势，但也需要开发者前后端开发中有一个更深入的了解，灵活运用 TypeScript 才能更好地发挥其优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8ecde46428fe9e7254ca
