深入浅出TypeScript

一、为什么要学习TypeScript

1.1 TS vs JS

 TypeScript 是 JavaScript 的超集，它包含了 JavaScript 的所有元素，并扩展了 JavaScript 的语法和功能。

1.2 TypeScript的新特性

• 类型安全

• 下一代 js 特性

• 完善的工具链

二、TypeScript基础

2.1 基础类型

• boolean类型：用于表示布尔值，只有两个值：true 和 false。

• number类型：用于表示数字，可以是整数或浮点数。

• string类型：用于表示字符串，可以使用单引号或双引号来定义。

• null类型：用于表示空值。

• undefined 类型：用于表示未定义。

• any类型：表示任意类型，可以赋予任意类型的值。

• unknown类型：与any类型类似，但更安全，因为在对 unknown 类型的值进行操作之前，需要先进行类型判断。

• void类型：表示没有任何返回值的函数返回值类型。

• never类型：表示永不存在的值的类型，常用于抛出异常或无限循环的函数返回值类型。

• 数组类型[]：用于表示一组相同类型的值。可以使用 type[] 或 Array 来定义。

• 元组类型Tuple：用来表示一个已知元素数量和类型的数组，各元素的类型不必相同。

2.2 函数类型function

• 定义：TS 定义函数类型时要定义输入参数类型和输出类型。

• 输入参数：参数支持可选参数和默认参数。

• 输出参数：输出可以自动推断，没有返回值时，默认为 void 类型。

• 函数重载：名称相同但参数不同，可以通过重载支持多种类型。

2.3 接口类型interface

• 定义：接口是为了定义对象类型

• 特点：

1. 可选属性： ？

2. 只读属性：readonly

3. 可以描述函数类型

4. 可以描述自定义属性

• 总结：接口非常灵活 duck typing

2.4 类class

• 定义：写法与 JS 区别不大，但增加了一些定义。

• 特点：

1. 增加了 public、private、protected 修饰符

2. 抽象类abstract：只能被继承，不能被实例化；作为基类，抽象方法必须被子类实现

3. 约束类interface，使用 implements 关键字

三、TypeScript进阶

3.1 高级类型

• 联合类型|

• 交叉类型&

• 类型断言as

• 类型别名type

3.2 type vs interface

• 相同点：

1. 都可以定义对象或函数

2. 都允许继承

• 不同点：

1. interface 是 TS 用来定义对象，type 是用来定义别名方便使用

2. type 可以定义基本类型，interface 不行

3. interface 可以合并重复声明，type 不行

3.3 泛型T

• 基本定义：

1. 泛型的语法是<> 里面写类型参数，一般用 T 表示

2. 使用时有两种方法指定类型：1. 定义要使用的类型 2. 通过 TS 类型推断，自动推导类型

3. 泛型的作用是临时占位，之后通过传来的类型进行推导

• 基本操作符：

1. typeof：获取类型

2. keyof：获取所有键

3. in：遍历枚举类型

4. T[K]：索引访问

5. extends：泛型约束

• 常用工具类型：

1. Partial：将类型属性变为可选

2. Required：将类型属性变为必选

3. Readonly：将类型属性变为只读

四、TypeScript实战

4.1 声明文件

• declare：三方库需要类型声明文件

• .d.ts：声明文件定义

• @types：三方库 TS 类型包

• tsconfig.json：定义 TS 的配置

4.2 泛型约束后端接口文件