TypeScript：怎么解决无法使用外部第三方库的问题？-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种由微软开发的静态类型检查器和 TypeScript 编译器的语言，它通过在代码中引入“类型”的概念，帮助开发者避免一些常见的错误。TypeScript 使用了 ECMAScript 的语法规范，并给它加上了一些额外的功能。但有时，开发者可能需要使用一些现有的第三方库，那么，如何在 TypeScript 中使用它们呢？

TypeScript 定义文件

在 TypeScript 中使用第三方库，最直接的方式就是通过“定义文件”（Declaration files）来描述第三方库的 API。定义文件的扩展名为 .d.ts，其中包含了接口、类型、函数、变量等描述的语句，它们是基于 TypeScript 语言语法的，但在定义文件中不包含实现代码，主要用于类型检查和代码结构提示。

定义文件可以由开发者自己创建，也可以通过纯 TypeScript 的方式自动创建。如果要自己创建定义文件，可以参考以下步骤：

创建一个与第三方库同名的 .d.ts 文件；
在该文件中声明一个全局变量，以便使用第三方库中的函数和类；
在该文件中编写一个声明模块（declare module）和声明命名空间（declare namespace）的语句，以便描述第三方库的 API。

举个例子，如果我们要使用 jQuery 的库文件，可以创建一个名为 jquery.d.ts 的文件，然后声明一个全局变量 jQuery：

declare var jQuery: (selector: string) => any;

紧接着，在该文件中，我们还可以为 jQuery 提供一个命名空间 JQueryStatic，以便描述 jQuery 的接口和类型：

-- -------------------- ---- -------
------- --------- ------------ -
    --------- ------------ -
        ----- -------
        -------- -------
        ------ ----
        ---
    -

    --------- ---------- -
        -------- --------
        ------- ----
    -

    -------- -------------- -------------- --------------------
    ---
-

完成上述定义文件后，我们就可以在 TypeScript 中使用 jQuery 了，如下所示：

import * as $ from 'jquery';

$.ajax({ url: 'http://www.example.com' }).done((result) => {
    console.log(result);
});

库文件安装与使用

上面的方法适用于在 TypeScript 中使用已经有了定义文件的第三方库，但如果一个库没有定义文件该怎么办呢？此时我们需要安装相应的定义文件，或者自己手动创建一个。

安装库文件

安装库文件是一种比较简单的方式，它可以让我们获得一个第三方库的定义文件，从而可以很方便地在 TypeScript 项目中使用该库。

例如，我们要在 TypeScript 项目中使用 Moment.js，我们可以在命令行中运行以下命令：

npm install --save-dev @types/moment

在运行该命令后，npm 会帮我们安装 Moment.js 的定义文件。接下来，我们就可以在 TypeScript 代码中使用 Moment.js 了：

import * as moment from 'moment';

let now = moment();
console.log(now.format('YYYY-MM-DD'));

使用 npm 包

另一种常用的方法是使用 npm 包。当我们在项目中使用 npm 包时，需要确保我们安装了该库，同时也需要安装与之相关联的类型定义库。

举个例子，如果我们想使用 Lodash 库，可以通过以下命令安装 Lodash 和 Lodash 的类型定义库：

npm install --save lodash @types/lodash

接下来，我们可以在 TypeScript 中导入 Lodash 并使用它：

import * as _ from 'lodash';

let nums = [1, 2, 3, 4, 5];
console.log(_.sum(nums)); // 15

手动创建定义文件

如果没有安装或者找不到任何相关的定义文件，那么我们就需要手动创建一个。虽然这种方式比较麻烦，但它对于加深我们对 TypeScript 理解的深度和巩固 TypeScript 基础是非常有帮助的。

举个例子，如果我们想创建一个名为 example 的库，它暴露了一个函数 print，我们可以在 example.d.ts 文件中编写以下代码：

declare module 'example' {
    function print(str: string): void;
}

接着，在 TypeScript 中可以这样使用 example：

import * as example from 'example';

example.print('Hello TypeScript!');

总结

TypeScript 是一个具有强类型和类型检查功能的编程语言，它可以使我们的代码更加健壮、可靠和容易维护。在使用 TypeScript 编写前端代码时，我们可能需要使用一些第三方库，在这种情况下，我们可以使用定义文件来描述第三方库的 API，或者安装其他人已经创建的定义文件。如果没有定义文件，我们也可以手动创建一个。需要注意的是，定义文件的语法与 TypeScript 语言语法相同，但是它们用于描述类型和 API，而不是实现代码。

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