TypeScript实例讲解（二十二）

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（二十一）

本篇内容：TypeScript 类型定义（注解）文件（一）。

开发中可能在 TypeScript 项目中引入 JavaScript 文件或 JavaScript 库文件，普通 JavaScript 没有 TypeScript 要求的类型的概念，在 TypeScript 文件中直接引入使用 JavaScript，TypeScript 是不能理解的。

// 例 1
// demo.ts
$(function () {
    console.log('hello');   // hello
})

这是一段能正确运行的 jQuery 代码。但是编辑器会提示 Unresolved function or method $()，一般这时候就需要安装 jQuery 的类型定义文件，如 @types/jquery 。

TypeScript 代码里面使用 jQuery 是通过 JS 的形式进行引入的，引入的文件没有 TypeScript 类型注解，因此无法正确识别。类型定义文件的作用就是打通 TypeScript 与 JavaScript 之间的代沟，帮助 TypeScript 去理解 $() 等 jQuery 方法到底是什么。

为了深入理解类型定义文件，我们可以自己实现一个简单的类型定义文件。

定义全局变量

// 例 2
// jquery.d.ts
declare var $: (param: () => void) => void;

声明一个全局变量 $ , 变量 $ 是一个函数，它接收一个函数类型的参数并且返回值是空。

说明：
declare 关键字表示声明
var 关键字表示变量

定义全局函数

// 例 3
// jquery.d.ts
declare function $(param: () => void): void;

除了让 $ 是一个变量，还可以直接让 $ 是一个函数。例3的意思是：函数的名称是 $ ，它接收的参数是一个函数，并返回空。

// 例 4
// demo.ts
$(function () {
    $('body').html('hello');
})

例4使用了 jQuery 另外的一个方法，发现第一个 $() 正常，第二个 $() 提示错误。因为前面我们类型定义文件里面声明的 $() 函数接收一个函数，而这里第二个 $() 传入的参数是一个字符串。

// 例 5
// jquery.d.ts
declare function $(param: () => void): void;
declare function $(param: string): {
    html: (html: string) => {}
};

现在的 $() 既可以接收一个函数，又可以接收一个字符串。类型定义文件中允许对同一个函数名做多次全局声明，这实际上是前面讲解过的 函数重载 。

// 例 6
// jquery.d.ts
interface JqueryInstance {
    html: (html: string) => JqueryInstance
}
declare function $(param: () => void): void;
declare function $(param: string): JqueryInstance;

使用接口对例5进行了优化，这样就能很清晰地看出：如果传入一个函数，返回值为空；如果传入一个字符串，返回值为 JqueryInstance 类型的值。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。