TypeScript（三）

目录

[五、TypeScript 类型声明文件](#五、TypeScript 类型声明文件)

概述

[5.1 TS中的两种文件类型](#5.1 TS中的两种文件类型)

[5.2 类型声明文件的使用说明](#5.2 类型声明文件的使用说明)

[六、在 React 中使用 TypeScript](#六、在 React 中使用 TypeScript)

概述

[6.1 使用CRA创建支持TS的项目](#6.1 使用CRA创建支持TS的项目)

[6.2 TS 配置文件 tsconfig.json](#6.2 TS 配置文件 tsconfig.json)

[6.3 React 中的常用类型](#6.3 React 中的常用类型)

五、TypeScript 类型声明文件

概述

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

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

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

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

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

1. TS的两种文件类型
2. 类型声明文件的使用说明

5.1 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文件。

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

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

1. 使用已有的类型声明文件
2. 创建自己的类型声明文件

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

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

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

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

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

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

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

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

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

第三方库的类型声明文件有两种存在形式：1. 库自带类型声明文件 2.由DefinitelyTyped提供。

1. 库自带类型声明文件：比如，axios。

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

2. 由DefinitelyTyped提供。

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

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

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

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

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

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

• 创建自己的类型声明文件：1. 项目内共享类型 2. 为已有JS文件提供类型声明。

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

操作步骤：

1. 创建index.d.ts类型声明文件。
2. 创建需要共享的类型，并使用export导出（TS中的类型也可以使用 import/export 实现模块化功能）。
3. 在需要使用共享类型的.ts文件中，通过import导入即可（.d.ts后缀导入时，直接省略）。

• 创建自己的类型声明文件：1. 项目内共享类型 2. 为已有JS文件提供类型声明。

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

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

4. 成为库作者，创建库给其他人使用。

注意：类型声明文件的编写与模块化方式相关，不同的模块化方式有不同的写法。但由于历史原因，JS模块化的发展经历过多种变化（AMD、CommonJS、UMD、ESModule等），而TS支持各种模块化形式的类型声明。这就导致类型声明文件相关内容又多又杂。

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

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

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

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

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

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

1. 对于type、interface等这些明确就是TS类型的（只能在TS中使用的），可以省略declare关键字。
2. 对于let、function等具有双重含义（在JS、TS中都能用），应该使用declare关键字，明确指定此处用于类型声明。

六、在 React 中使用 TypeScript

概述

现在，我们已经掌握了TS中基础类型、高级类型的使用了。但是，如果要在前端项目开发中使用TS，还需要掌握React、Vue、Angular等这些库或框架中提供的API的类型，以及在TS中是如何使用的。

接下来，我们以React为例，来学习如何在React项目中使用TS。包括以下内容：

1. 使用CRA创建支持TS的项目
2. TS 配置文件 tsconfig.json
3. React 中的常用类型

6.1 使用CRA创建支持TS的项目

React 脚手架工具 create-react-app（简称：CRA）默认支持 TypeScript。

创建支持TS 的项目命令：npx create-react-app 项目名称 --template typescript。

当看到以下提示时，表示支持TS的项目创建成功：

更多：在已有项目中使用TS

相对于非TS项目，目录结构主要由以下三个变化：

1. 项目根目录中增加了 tsconfigjson 配置文件：指定TS的编译选项（比如，编译时是否移除注释）。
2. React组件的文件扩展名变为：*.tsx。
3. src目录中增加了react-app-env.d.ts：React 项目默认的类型声明文件。

react-app-env.d.ts：React 项目默认的类型声明文件。

三斜线指令：指定依赖的其他类型声明文件，types表示依赖的类型声明文件包的名称。

解释：告诉TS帮我加载react-scripts这个包提供的类型声明。

react-scripts的类型声明文件包含了两部分类型：

1. react、react-dom、node 的类型
2. 图片、样式等模块的类型，以允许在代码中导入图片、SVG等文件。

TS会自动加载该 .d.ts文件，以提供类型声明（通过修改 tsconfigjson 中的 include 配置来验证）。

6.2 TS 配置文件 tsconfig.json

tsconfig.json 指定：项目文件和项目编译所需的配置项。

注意：TS的配置项非常多（100+），以CRA项目中的配置为例来学习，其他的配置项用到时查文档即可。

1. tsconfig.json 文件所在目录为项目根目录（与package.json同级）。
2. tsconfig.json 可以自动生成，命令：tsc --init。

除了在 tsconfigjson 文件中使用编译配置外，还可以通过命令行来使用。

使用演示：tsc hello.ts --target es6。

注意：

1. tsc后带有输入文件时（比如，tsc hello.ts），将忽略 tsconfig.json文件。
2. tsc后不带输入文件时（比如，tsc），才会启用 tsconfig.json。

推荐使用：tsconfig.json配置文件。

6.3 React 中的常用类型

前提说明：现在，基于 class 组件来讲解 React+TS 的使用（最新的ReactHooks，在后面讲解）。

在不使用TS时，可以使用 prop-types 库，为 React 组件提供类型检查。

说明：TS项目中，推荐使用 TypeScript 实现组件类型校验（代替 PropTypes）。

不管是 React 还是 Vue，只要是支持TS的库，都提供了很多类型，来满足该库对类型的需求。

注意：

1. React 项目是通过 @types/react、@types/react-dom 类型声明包，来提供类型的。
2. 这些包CRA已帮我们安装好（react-app-env.d.ts），直接用即可。

参考资料：React文档-静态类型检查、React+TS备忘单。

React是组件化开发模式，React开发主要任务就是写组件，两种组件：1.函数组件 2.class组件。

1. 函数组件，主要包括以下内容：

• 组件的类型

• 组件的属性（props）

• 组件属性的默认值（defaultProps）

• 享事件绑定和事件对象

• 函数组件的类型以及组件的属性

实际上，还可以直接简化为（完全按照函数在TS中的写法）：

• 函数组件属性的默认值（defaultProps）

实际上，还可以直接简化为（完全按照函数在TS中的写法）：

• 事件绑定和事件对象

再比如，文本框：

技巧：在JSX中写事件处理程序（e=>{}），然后，把鼠标放在e上，利用TS的类型推论来查看事件对象类型。

2. class组件，主要包括以下内容：

• 组件的类型、属性、事件

• 组件状态（state）

• class组件的类型

• class组件的属性和属性默认值

• class组件状态（state）和事件