在 Angular TypeScript 应用中，我们经常需要引入外部库来实现一些特定的功能。但是，正确导入外部库并不是一件简单的事情。本文将会介绍如何在 Angular TypeScript 应用中正确导入外部库，并提供一些示例代码。
第一步：安装外部库
首先，我们需要安装需要使用的外部库。可以使用 npm 或 yarn 来进行安装。例如，我们需要使用 jQuery 库，可以使用以下命令进行安装：
--- ------- ------ ------
或者
---- --- ------
第二步：声明外部库
在 TypeScript 中，我们需要声明外部库，以便 TypeScript 编译器能够正确地识别库中的类型。声明文件通常以 .d.ts 结尾，并包含库中的类型定义。
对于 jQuery 库，我们可以使用以下命令来安装它的类型声明：
--- ------- ------------- ----------
或者
---- --- ------------- -----
在安装完成后，我们需要在 TypeScript 文件中引入声明文件，例如：
--- ---------- -------------- --
这个语句告诉 TypeScript 编译器，我们需要使用 jQuery 的类型定义。
第三步：导入外部库
在 TypeScript 中，我们可以使用 import 语句来导入外部库。对于 jQuery 库，我们可以使用以下语句来导入它：
------ - -- - ---- ---------
这个语句将会把 jQuery 库导入到 $ 变量中，我们就可以使用 $ 变量来访问库中的方法和属性了。
示例代码
下面是一个使用 jQuery 库的示例代码：
--- ---------- -------------- --
------ - --------- - ---- ----------------
------ - -- - ---- ---------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - --- -----
---------- -
-------------------- -- -
------------------- -- ---------
---
-
-在这个示例代码中，我们首先使用了 import 语句来导入 jQuery 库，并使用 $ 变量来访问库中的方法和属性。在 ngOnInit 方法中，我们使用了 jQuery 的 ready 方法来在页面加载完成后执行代码。
总结
在 Angular TypeScript 应用中正确导入外部库需要三个步骤：安装外部库、声明外部库和导入外部库。如果这些步骤都正确执行，我们就可以在应用中使用外部库了。本文提供了一个使用 jQuery 库的示例代码，希望能够帮助读者更好地理解如何在 Angular TypeScript 应用中正确导入外部库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c3582eadd4f0e0ffd9b249