TypeScript学习总结（16）

类型声明文件

今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的，最终都要编译成JS 代码，才能发布给开发者使用。我们知道是TS 提供了类型，才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时，你会发现它们几乎都有相应的TS类型，这些类型是怎么来的呢?类型声明文件类型声明文件:用来为已存在的JS库提供类型信息。这样在 TS 项目中使用这些库时，就像用TS一样，都会有代码提示、类型保护等机制了。
 

一、TS中的两种文件类型

TS 中有两种文件类型: 1.ts 文件 2. d.ts 文件:
.ts 文件:
1.既包含类型信息又可执行代码。
2可以被编译为.js 文件，然后，执行代码。
3.用途:编写程序代码的地方。

.d.ts 文件:
1.只包含类型信息的类型声明文件
2不会生成.js 文件，仅用于提供类型信息。
3.用途:为JS 提供类型信息。 

总结:

.ts是implementation(代码实现文件);.d.ts是declaration(类型声明文件)。
如果要为JS库提供类型信息，要使用.d.ts 文件。 

二、类型声明文件的使用 

在使用 TS 开发项目时，类型声明文件的使用包括以下两种方式
1.使用已有的类型声明文件
2.创建自己的类型声明文件

1.使用已有的类型声明文件

使用已有的类型声明文件:1内置类型声明文件2第三方库的类型声明文件。

1.1 内置类型声明文件

TS为JS运行时可用的所有标准化内置API都提供了声明文件。比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

实际上这都是TS 提供的内置类型声明文件。
可以通过 Ctrl+鼠标左键(Mac:option+鼠标左键)来查看内置类型声明文件内容。比如，查看forEach 方法的类型声明，在VSCode中会自动跳转到lib.es5.d.ts类型声明文件中。当然，像 window、document等 BOM、DOMAPI也都有相应的类型声明(lib.dom.d.ts)

1.2 第三方库的类型声明文件 

目前，几乎所有常用的第三方库都有相应的类型声明文件第三方库的类型声明文件有两种存在形式:  1.库自带类型声明文件  2.由 DefinitelyTyped 提供。

1.2.1 库自带类型声明文件

比如，axios

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

1.2.2 由 DefinitelyTyped 提供

DefinitelyTyped 是一个 github 仓库，用来提供高质量TypeScript类型声明。可以通过 npm/yarn 来下载该仓库提供的TS 类型声明包，这些包的名称格式为:@types/*比如，@types/react、@types/lodash等
说明:在实际项目开发时，如果你使用的第三方库没有自带的声明文件，VSCode会给出明确的提示。

解释:当安装 @types/*类型声明包后，TS也会自动加载该类声明包，以提供该库的类型声明。
补充:TS 官方文档提供了一个页面，可以来查询 @types/*库。 

2.创建自己的类型声明文件

2.1 项目内共享类型

项目内共享类型:如果多个.ts 文件中都用到同一个类型，此时可以创建.d.ts 文件提供该类型，实现类型共享。
操作步骤:
创建 index.d.ts 类型声明文件。
创建需要共享的类型，并使用export导出(TS中的类型也可以使用import/export 实现模块化功能)。在需要使用共享类型的.ts 文件中，通过import 导入即可(.d.ts后缀导入时，直接省略)。

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

1.在将JS 项目迁移到 TS 项目时，为了让已有的 js 文件有类型声明。
2.成为库作者，创建库给其他人使用。
注意:类型声明文件的编写与模块化方式相关，不同的模块化方式有不同的写法。但由于历史原因，JS模块化的发展经历过多种变化(AMD、CommonJS、UMD、ESModule等)，而TS支持各种模块化形式的类型声明。这就导致，类型声明文件相关内容又多又杂。

说明:TS项目中也可以使用.js 文件。
说明:在导入.js 文件时，TS会自动加载与.js 同名的.d.ts 文件，以提供类型声明

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

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

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

typescript学了一段时间了，由于目前想的是Cocos开发，先不学了react了，对于Cocos开发应该是够用了，以后会不定期更新Cocos开发的一些心得，再次感谢大家的支持