TypeScript 已经成为 Web 前端工程师不可或缺的技术之一，它可以帮助我们减少类型错误，提高代码可读性和可维护性。但是在实际开发中，我们往往需要使用第三方库来完成一些复杂的功能，这时候如何让 TypeScript 无缝使用这些库就成为了一个很重要的问题。
在本文中，我们将重点介绍如何在 TypeScript 中使用第三方库，让 TypeScript 真正的发挥作用。同时，我们将通过示例代码来展示我们的操作步骤，让大家更容易理解。
一. 安装第三方库
在使用第三方库之前，我们需要先安装它。使用 npm 安装第三方库的命令为：
--- ------- --------------
如果希望将这个库安装到全局当中，应该在命令后加上 -g 参数：
--- ------- -- --------------
二. 引入第三方库
引入第三方库的方式有两种，一种是使用全局变量的方式引入，另一种是使用 ES6 模块的方式引入。
1. 全局变量方式
在全局变量方式下，我们需要使用 declare 关键字来声明一个全局变量，这样 TypeScript 就会自动识别它并将它的类型信息包含在代码中。
以 moment.js 为例，如果想在 TypeScript 中使用它，我们需要先安装它：
--- ------- ------
然后在代码中声明全局变量：
------- --- ------- ----
我们可以使用 any 关键字来表示这个变量可以是任何类型，这样我们便可以在 TypeScript 中使用 moment.js 了。
代码示例：
------- --- ------- ---- -------------------------------------------
需要注意的是，这种方式会影响代码的可读性和可维护性，所以我们尽量不要使用这种方式。
2. ES6 模块方式
在 ES6 模块的方式下，我们可以直接通过 import 语句来引入第三方库。不过在这之前，我们需要先在 tsconfig.json 中添加配置项：
-
------------------ -
--------- -----
-
-然后在代码中通过 import 语句引入第三方库：
------ - -- ------ ---- --------- -------------------------------------------
这种方式可以减少代码中的类型错误，并提高代码的可读性和可维护性。
三. 配置声明文件
不是所有的第三方库都自带声明文件，如果我们直接使用这样的库，TypeScript 就无法识别它。为此，我们需要手动添加声明文件或者通过 npm 安装对应的声明文件。
1. 手动添加声明文件
手动添加声明文件的方式是将一个 .d.ts 文件添加到我们的项目中。这个文件将告诉 TypeScript 第三方库的类型信息，让 TypeScript 可以正确的使用它。
例如，如果我们需要使用 jQuery，我们可以在项目中添加一个 jquery.d.ts 文件，这个文件中声明了 jQuery 的类型信息：
------- --- ------- ---------- ------- -- ----
然后在代码中引入这个声明文件：
--- ---------- ---------------------------- --
2. 安装声明文件
另一种方式是通过 npm 安装第三方库的声明文件，可以使用 @types/ 包来实现：
--- ------- ---------------------
例如，如果我们需要使用 jQuery，我们可以执行以下命令来安装它的声明文件：
--- ------- -------------
然后在代码中直接使用：
------ - -- - ---- --------- -------------------------- - ----------------- ---
四. 结论
在 TypeScript 中使用第三方库可以帮助我们提高开发效率和代码的可读性和可维护性。我们要根据具体情况选择引入方式，尽量避免使用全局变量方式，并在需要时手动添加或安装声明文件。
代码示例：
--- ---------- ---------------------------- -- ------ - -- - ---- --------- ------ - -- ------ ---- --------- -------------------------- - ----- ---- - ------------------------------ -------------- -- ---------- ---
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ff77fa1b0bf82c71ca2bd1