TypeScript类声明文件

概述：

今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。

这些第三方库不管是否是使用TS编写的，最终都要编译成JS代码，才能发布给开发者使用。

我们知道是TS提供了类型，才有了代码提示和类型保护等机制。

但在项目开发中使用第三方库时，你会发现它们几乎都有相应的TS类型，这些类型是怎么来的呢？类型声明文件

类型声明文件：用来为已存在的JS库提供类型信息

这样在TS项目中使用这些库时，就像用TS一样，都会有代码提示、类型保护等机制了。

①TS的两种文件类型

②类型声明文件的使用说明

1.TS中的两种文件类型

TS中有两种文件类型：①.ts文件 ②.d.ts文件。

*.ts文件：

①既包含类型信息又可执行代码

②可以被编译为.js文件，然后，执行代码。

③用途：编写程序代码的地方

*.d.ts文件：

①只包含类型信息的类型声明文件

②不会生成.js文件，仅用于提供类型信息

③用途：为JS提供类型信息

总结：.ts是implementation（代码实现文件）：.d.ts是declaration（类型声明文件）。

如果要为JS库提供类型信息，要使用.d.ts文件。

2.类型声明文件的使用说明

在使用TS开发项目时，类型声明文件的使用包括以下两种方式：

-使用已有的类型声明文件

-创建自己的类型声明文件

学习顺序：先会用（别人的）再会写（自己的）

2.1使用已有的类型声明文件：①内置类型声明文件②第三方库的类型声明文件

①内置类型声明文件：TS为JS运行时可用的所有标准化内置API都提供了声明文件。

比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息：

//(method)Array<number>.forEach(callbackfn:(value:number,index:number,array:number[])=>void,thisArg?:any):void

实际上这都是TS提供的内置类型声明文件

可以通过Ctrl+鼠标左键（Mac：option+鼠标左键）来查看内置类型声明文件内容

比如，查看forEach方法的类型声明，在VSCode中会自动跳转到lib.es5.ts类型声明文件中。

当然，像window、document等BOM、DOM API也都会有相应的类型声明（lib.dom.d.ts）

②第三方库的类型声明文件：目前，几乎所有常用的第三方库都有相应的类型声明文件。

第三方库的类型声明文件有两种存在方式：

*库自带类型声明文件：比如，axios

index.d.ts

解释：这种情况下，正常导入该库，TS就会自动加载库自己的类型声明文件，已提供该库的类型声明

*由DefinitelyTyped提供

DefinitelyTyped是一个github仓库，用来提供高质量TypeScript类型声明。

可以通过npm/yarn来下载该仓库提供的TS类型声明包，这些包的名称格式是为：@types/*。

比如，@types/react、@types/lodash等。

说明：在实际项目开发时，如果你使用的第三方库没有自带的声明文件，VSCode会给出明确的提示。

import _ from 'lodash' import {difference} from 'lodash'

//尝试使用`npm i --save-dev @types/lodash`(如果存在)，或者添加一个包含`declare module 'lodash';`的新声明(.d.ts)文件

解释：当安装@typess/*类型声明包后，TS也会自动加载该类声明包，已提供该库的类型声明。

补充：TS官方文档提供了一个页面，可以来查询@types/*库

2.2 创建自己的类型声明文件：①项目内共享类型②为已有JS文件提供类型声明

①项目内共享类型：如果多个.ts文件中都用到同一个类型，此时可以创建.d.ts文件提供该类型，实现类型共享。

操作步骤：

*创建index.d.ts类型声明文件

*创建需要共享的类型，并使用export导出（TS中的类型也可以使用import/export实现模块化功能）

*在需要使用共享类型的.ts文件中，通过import导入即可（.d.ts后缀导入时，直接省略）

//index.d.ts

type Props = {x:number;y:number}

export {Props}

//a.ts

import {Props} from './index'

let P:Props = {

x:10,

y:12

}

②为已有JS文件提供类型声明：

*在将JS项目迁移到TS项目时，为了让已有的.js文件有类型声明。

*成为库作者，创建库给其他人使用

注意：类型声明文件的编写与模块化方式相关，不同的模块化方式有不同的写法。但由于历史原因，JS模块化的发展经历过多种变化（AMD、CommonJS、UMD、ESModule等），

而TS支持各种模块化形式的类型声明。这就导致，类型声明文件相关内容又多又杂

演示：基于最新的ESModule（import/export）来为已有.js文件，创建类型声明文件

开发环境准备：使用webpack搭建，通过ts-loader处理.ts文件。

说明：TS项目中也可以使用.js文件

说明：在导入.js文件时，TS会自动加载与.js同名的.d.ts文件，以提供类型声明

declare关键字：用于类型声明，为其他地方（比如，.js文件）已存在的变量声明类型，而不是创建一个新的变量（declare let count:number）

*对于type、interface等这些明确就是TS类型的（只能在TS中使用的），可以省略declare关键字。

*对于let、function等具有双重含义（在JS、TS中都能用），应该使用declare关键字，明确指定此处用于类型声明

注意：类型提供好以后，需要使用模块化方案中提供的模块化语法，来导出声明好的类型。然后，才能在其他的.ts文件中使用

（export {count}）