TypeScript 是一个强类型的 JavaScript 超集，它允许我们在编写 JavaScript 代码时加入类型检查，提高开发效率和代码可维护性。但在实际开发中，我们经常需要使用一些外部 JavaScript 库来帮助我们实现各种功能，这时如何在 TypeScript 中引入这些库呢？本文将详细介绍 TypeScript 中引入外部 JavaScript 库的方法。
直接使用
如果我们要使用的某个 JavaScript 库已经定义了需要用到的类型，那么我们可以直接在 TypeScript 中引入它，并像普通 JavaScript 代码一样使用。
例如，假设我们要使用 jQuery，我们可以在 TypeScript 文件中这样引入：
import * as $ from 'jquery';
然后就可以像 JavaScript 一样使用 $ 对象，例如：
$(document).ready(function() {
// do something...
});这种方式的好处是非常简单直接，不需要任何其他额外的配置，并且使用起来和普通的 JavaScript 代码一样方便。但它的缺点是，如果引入的库没有定义类型，代码提示和类型检查可能会受到影响。
定义类型
如果我们要使用的某个 JavaScript 库还没有定义类型，那么我们可以自己定义它的类型，以便在 TypeScript 中使用。
要定义一个库的类型，需要创建一个 .d.ts 文件，该文件中应该包含该库的定义。例如，假设我们要定义 jQuery 的类型，可以创建一个名为 jquery.d.ts 的文件，并在其中定义 jQuery 的类型。
-- -------------------- ---- ------- ------- -------- ----------- -------- ---- ------- -------- ---------- --------- ---- ------- -------- --------- ---- ---- ------- -------- --------------- ----------- ---- ------- -------- --------- -------- ---- ------- --------- - - -------- ------------- ---- ----- -------- -------- ------- ------ --- --------- ---------- ----- -------- ---------- ---- ------- -
这个定义中，我们用 declare 关键字来声明所有函数和命名空间，以及它们的参数和返回值的类型。这样，在引入 jQuery 时，TypeScript 将能够理解 jQuery 的类型，并提供正确的代码提示和类型检查。
外部模块
有些库不是通过 import 语句来引入的，而是通过在 HTML 页面中直接引入相应的 JavaScript 文件。这时，我们需要使用外部模块来引入这些库。
外部模块是一种在 TypeScript 中引入 JavaScript 库的方式。与直接使用和定义类型不同，使用外部模块需要对 TypeScript 的编译配置进行一些调整。
例如，假设我们要使用 Moment.js，我们可以按照下面的步骤来将 Moment.js 引入到我们的 TypeScript 代码中：
- 在 HTML 页面中引入 Moment.js：
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
- 在 TypeScript 代码中定义 Moment.js 类型：
-- -------------------- ---- -------
------- ------ -------- -
------ - -------
-
------- --- ------- --------------------
------- --------- ------ -
--------- ------ -
-- ---
-
--------- ----------- -
-- ---
-
--------- ------------ -
--- -------
----------- -------- -------
------ ------ -------
------------ ------- ------------ ------- --------------- --------- -------
------------ ------- ------------ ------- ---------- ------- --------------- --------- -------
-- ---
-
-- 在 TypeScript 代码中引入 Moment.js：
import * as moment from 'moment';
这样，我们就可以像普通 TypeScript 代码一样在项目中使用 Moment.js 了。
总结
本文介绍了 TypeScript 中引入外部 JavaScript 库的方法，包括直接使用、定义类型和外部模块。通过这些方法，我们可以在 TypeScript 中使用各种 JavaScript 库，提高开发效率和代码可维护性。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------- -- ---------- -----------
-------
------
------- -------------------------------------
------- -------------------------------
------- ------------------------
-------
--------- -------------------- ---- -------
-- ---------------------
------- -------- ----------- -------- ----
------- -------- ---------- --------- ----
------- -------- --------- ---- ----
------- -------- --------------- ----------- ----
------- -------- --------- -------- ----
------- --------- - -
-------- ------------- ---- -----
-------- -------- ------- ------ --- --------- ---------- -----
-------- ---------- ---- -------
-
-- ---------------------
------- ------ -------- -
------ - -------
-
------- --- ------- --------------------
------- --------- ------ -
--------- ------ -
--------------- -------- -------
----------- ------- ----- -------- -------
---------------- ------- ----- -------- -------
------- -------- -------
------ -------- -------
-------- -------- -------
---------- -------- -------
---------- -------- -------
--------- ------- ------ -------- -------
--------- -------- -------
----------------- ------ - ------- --------------- --------- ------ - -------
--------------- -------- -------
------------ -------- -------
--------- -----
---------- ---------
--------------- ------ - ------ - ---- - ------- ------ -------- --------
------------- ------ - ------ - ---- - ------- ------ -------- --------
-------------- ------ - ------ - ---- - ------- ------ -------- --------
--------- -------
-------------- -------- -------
-------------- ---------- -------
----------------------- --------- -------
------------------ -------- --------------- --------- -------
--------------------- --------- -------
---------------- -------- --------------- --------- -------
----------- -------
----------------------- ------ - ------ - ---- - ------- -------- -
--------- ----
--------- ----
---------- ----
--------- ----
---------- ----
---------- ----
--- -------
------- ------ - ------ - ---- - ------- ------------ ------- --------- --------- -------
---------- ---------
--------- -------
---------- --------
---------- -------
------- -------
----------- -------
-
--------- ----------- -
------- -------
--- -------
-------- -------
--- -------
------- -------
--- -------
------ -------
--- -------
------- -------
--- -------
--------- -------
--- -------
--------- -------
--- -------
-------------- -------
---- -------
-
--------- ------------------ -
-- ---
-
--------- ------------ -
--- -------
----------- -------- -------
------ ------ -------
------------ ------- ------------ ------- --------------- --------- -------
------------ ------- ------------ ------- ---------- ------- --------------- --------- -------
------------ ------- ------------ ------- ---------- ------- --------------- -------- ------- --------- -------
------ -------
-------------- -------- -------
--------- ------ -------
---------------- ------------- -------
--------------- ------- ------------ ------- --------------- --------- -------
--------------- ------- ------------ ------- ---------- ------- --------------- --------- -------
--------------- ------- ------------ ------- ---------- ------- --------------- -------- ------- --------- -------
--------------------- -------- -------
--------------------- ------- ------------ -------- -------
--------------------- ------- ------------ ------- ---------- -------- -------
--------------------- ------- -------- ---------- -------
--------------------- ------- -------- --------- -------------- --------- -------
---------------- ----- --------
--------------- -------- -------
--------------- ------- ------------ ---------------- -------
--------------- -------- -------
--------------- ---------- -------
--------------- ------- ------------ ---------------- -------
--------------- -
--- -------
---- -------
-- -------
--- -------
---- -------
----- -------
-- -------
--- -------
---- -------
----- -------
--
---------- -------
---------------------- -------- ---------
------------ -------
------------ -------- -------
--------------- -------- -------
------------------ -------- -------
------------- ----- --------
--------- ---------
------------- -------- -------
-------------- -------- ---------
-------------- ------- ------ -------- -------
----------- ---------
--------------- -------- -------
---------------- -------- ---------
---------------- ------- ------ -------- -------
---------------- ---------
-------------------- -------- -------
--------------------- -------- ---------
--------------------- ------- ------ -------- -------
-------------- ---------
------------------ -------- -------
------------------- -------- ---------
------------------- ------- ------ -------- -------
---------------- ------ - ---------- ---------------
---------------------- ------- ----------- ---------------- ---------------
---------- ---------
--------------------- --------- ---------
------------------------ --------- ------------- -------- -------
-
-
-- --------
------ - -- - ---- ---------
------ - -- ------ ---- ---------
------------------- --------- ---
------------------- ------------ --------------------------- ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ac45648841e98948ea927