Vue TS 入门指南
TypeScript 是什么
TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。
TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）。
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。
TypeScript 初体验
安装 ts
问题：为什么要安装编译 TS 的工具包？
回答：Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行。
pnpm i -g typescript
typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化。
验证是否安装成功：tsc –v（查看 typescript 的版本）。
编译 ts 并运行
注意：TS 文件的后缀名为 .ts
编写 ts 文件，并使用命令将 ts 转换为 js，执行完毕，当前目录会出现一个 js文件
tsc .\hello.ts
简化运行 TS 的步骤 简化方式：使用 ts-node 包，直接在 Node.js 中执行 TS 代码。
安装命令：npm i -g ts-node（ts-node 包提供了 ts-node 命令）。
使用方式：ts-node hello.ts。
解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码。
常用类型
const age: number = 22
代码中的 : number 就是类型注解。
解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。
类型概述
可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型。
-
JS 已有类型
原始类型：number/string/boolean/null/undefined/symbol。
对象类型：object（包括，数组、对象、函数等对象）。
-
TS 新增类型
联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any 等。
原始类型
// 声明一个名为 age 的常量，类型为 number，赋值为 22
const age: number = 22;
// 声明一个名为 myName 的常量，类型为 string，赋值为空字符串
const myName: string = '';
// 声明一个名为 isLoading 的常量，类型为 boolean，赋值为 false
const isLoading: boolean = false;
// 声明一个名为 a 的常量，类型为 null，赋值为 null
const a: null = null;
// 声明一个名为 b 的常量，类型为 undefined，赋值为 undefined
const b: undefined = undefined;
// 声明一个名为 s 的常量，类型为 symbol，赋值为新创建的 Symbol
const s: symbol = Symbol();
数组类型
数组类型的两种写法：（推荐使用 number[] 写法）
const numbers: number[] = [2, 3, 4, 5, 3]
const strings: Array<string> = ['2', '3', '9']
联合类型
数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写？
解释：| （竖线）在 TS 中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）。
// 声明一个名为 arr 的变量，类型为 string 或 number，赋值为数字 2
let arr: string | number = 2;
// 声明一个名为 arr2 的变量，类型为 number 或 string 数组，赋值为数字 2
let arr2: number | string[] = 2;
// 声明一个名为 arr3 的变量，类型为包含 number 或 string 元素的数组，赋值为包含数字 1 和字符串 '3' 的数组
let arr3: (number | string)[] = [1, '3'];
类型别名
类型别名（自定义类型）：为任意类型起别名。
// type 定义一个类型为 person
type Person = {
name: string;
age: number;
email?: string; // 可选属性
}
// 使用类型
let user: Person = {
name: "Alice",
age: 30,
email: "alice@example.com"
}
函数类型
参数后面 + 返回值类型（: string），表示 String 类型
// 定义一个名为 add 的函数，接受两个参数 num1 和 num2，它们都是 number 类型
// 函数返回值类型为 string，将 num1 和 num2 相加后转换为字符串并返回
function add(num1: number, num2: number): string {
return (num1 + num2).toString();
}
还有一种方式：同时指定参数、返回值的类型
/**
* (num1: number, num2: number) 这块是参数类型
* string 是返回值类型
*/
const add: (num1: number, num2: number) => string = (num1, num2) => {
return (2 + 2).toString()
}
可选参数
可选参数：在可传可不传的参数名称后面添加 ?（问号）
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
function greet(name: string, greeting?: string): void {
if (greeting) {
console.log(`${greeting}, ${name}!`)
} else {
console.log(`Hello, ${name}!`)
}
}
greet('Alice') // 输出: Hello, Alice!
greet('Bob', 'Good morning') // 输出: Good morning, Bob!
对象类型
JS 中的对象是由属性和方法构成的，而 TS 中对象的类型就是在描述对象的结构（有什么类型的属性和方法）。
对象类型的写法：
语法：冒号 : {这里描述每个字段的类型，或者是函数的返回值，函数参数的类型}
let person: { name: string; age: number; sayHi(): void; greet(name: string): void } = {
name: '刘老师',
age: 18,
sayHi() {
},
greet(name: string) {
}
}
解释：
- 直接使用 {} 来描述对象结构。属性采用属性名: 类型的形式；方法采用方法名(): 返回值类型的形式。
- 如果方法有参数，就在方法名后面的小括号中指定参数类型（比如：greet(name: string): void）。
- 在一行代码中指定对象的多个属性类型时，使用 ;（分号）来分隔。
- 如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型），可以去掉 ;（分号）。
- 方法的类型也可以使用箭头函数形式（比如：{ sayHi: () => void }）
对象类型描述中，多行情况下，不需要加分号
对象类型可选参数
可选属性的语法与函数可选参数的语法一致，都使用 ?（问号）来表示。
// 定义一个 Person 类型，包含必选属性 name 和可选属性 age
type Person = {
name: string;
age?: number; // 可选属性 age
};
接口
// 声明一个接口
interface IPerson {
name: string
age: number
sayHi(): void
}
// 实现该接口
let person: IPerson = {
age: 0,
name: '',
sayHi(): void {
}
}
interface（接口）和 type（类型别名）的对比：
相同点：都可以给对象指定类型。
不同点：
- 接口，只能为对象指定类型。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
接口继承
// 定义 Point2D 接口，表示二维坐标点
interface Point2D {
x: number; // x 坐标属性
y: number; // y 坐标属性
}
// 定义 Point3D 接口，扩展自 Point2D 接口，表示三维坐标点
interface Point3D extends Point2D {
z: number; // z 坐标属性
}
// 声明一个变量 p3，类型为 Point3D，表示一个三维坐标点
let p3: Point3D = {
x: 0, // 二维坐标 x
y: 0, // 二维坐标 y
z: 0 // 第三维坐标 z
}
元组
元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型。
解释：
- 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
- 该示例中，元素有两个元素，每个元素的类型都是 number
const purple: [number, string] = [2, '2']
类型推论
在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型。
换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写！
发生类型推论的 2 种常见场景：1 声明变量并初始化时 2 决定函数返回值时。
// 这种情况会自动推论为 number
let age = 15
会自动根据返回值确定返回类型
function add(num1: number, num2: number) {
return num1 + num2.toString()
}
类型断言
通过 byid 获取的a标签 元素，是一个父类的元素，并不是 a 标签，所以不具备 href 属性。所以需要 类型断言
as HTMLAnchorElement 为真实的元素
解释：
- 使用 as 关键字实现类型断言。
- 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）。
- 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了
const aLink = document.getElementById('link') as HTMLAnchorElement
// 不常用
// const aLink = <HTMLAnchorElement>document.getElementById('link')
通过 console.dir($0) 打印当前对象信息，最下方有类型
字面量类型
通过 TS 类型推论机制，可以得到答案：
- 变量 str1 的类型为：string。
- 变量 str2 的类型为：'Hello TS'。
解释：
- str1 是一个变量（let），它的值可以是任意字符串，所以类型为：string。
- str2 是一个常量（const），它的值不能变化只能是 'Hello TS'，所以，它的类型为：'Hello TS'。
此处的 'Hello TS'，就是一个字面量类型。
使用模式：字面量类型配合联合类型一起使用。
使用场景：用来表示一组明确的可选值列表。
比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个。
枚举
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。
枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。
注意：形参 direction 的类型为枚举 Direction，那么，实参的值就应该是枚举 Direction 成员的任意一个， 直接通过点（.）语法访问枚举的成员。
// 定义一个枚举 Direction，表示方向
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}
// 定义一个函数 changeDirection，接受一个 Direction 类型的参数
function changeDirection(direction: Direction) {
// 在函数内部可以根据传入的 direction 参数做相应的处理
}
// 调用 changeDirection 函数，传入 Direction.Down 作为参数
changeDirection(Direction.Down);
解释：
- 使用 enum 关键字定义枚举。
- 约定枚举名称、枚举中的值以大写字母开头。
- 枚举中的多个值之间通过 ,（逗号）分隔。
- 定义好枚举后，直接使用枚举名称作为类型注解
注意：枚举成员是有值的，默认为：从 0 开始自增的数值。
具有初始值
// 纯数字枚举
enum NumericEnum {
A = 1,
B = 2,
C = 3,
D = 4
}
// 纯字符串枚举
enum StringEnum {
Apple = "Apple",
Banana = "Banana",
Cherry = "Cherry",
Date = "Date"
}
注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值。
枚举类型会被编译为 JS 代码，枚举其实就是对象。
推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效。
any 类型
原则：不推荐使用 any！这会让 TypeScript 变为 “AnyScript”（失去 TS 类型保护的优势）。
let variable: any;
variable = 123; // 可以赋值为 number 类型
variable = "hello"; // 可以赋值为 string 类型
variable = true; // 可以赋值为 boolean 类型
variable = [1, 2, 3]; // 可以赋值为数组类型
variable = { name: "Alice", age: 30 }; // 可以赋值为对象类型
variable = () => console.log("Hello"); // 可以赋值为函数类型
// 任意类型的值可以调用任意属性和方法，TypeScript 不会进行类型检查
console.log(variable.someUnknownProperty); // 不会报错，运行时可能出现 undefined 或其他错误
variable(); // 不会报错，运行时调用该函数
因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示。
其他隐式具有 any 类型的情况：
- 声明变量不提供类型也不提供默认值
- 函数参数不加类型。
注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型！
typeof
TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）。
使用场景：根据已有变量的值，获取该值的类型，来简化类型书写。
// 定义变量 p，类型推断为具有 x 和 y 属性的对象，属性值类型为 number
let p = { x: 1, y: 2 };
// 定义函数 changeDirection，参数 direction 的类型为 typeof p
// 这意味着传入的 direction 参数必须与变量 p 的类型相匹配
function changeDirection(direction: typeof p) {
// 函数体，这里可以根据传入的 direction 参数进行处理
}
// 调用 changeDirection 函数，传入一个具有相同结构的对象作为参数
changeDirection({ x: 1, y: 2 });
解释：
- 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同。
- typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于 JS 代码）。
- 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）。
高级类型
class 类
TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在。
constructor 是构造函数，只能有一个
class Person {
age: number // 定义 age 属性，类型为 number
gender: string // 定义 gender 属性，类型为 string
// 构造函数，用于初始化 Person 实例的属性
constructor() {
// 构造函数中没有明确的初始化逻辑，属性会使用默认值
// TypeScript 中类的属性默认值为 undefined
}
}
// 创建一个 Person 类的实例
const person = new Person()
person.age
实例方法
在类中的方法，被定义为实例方法。
class Person {
age: number // 定义 age 属性，类型为 number
add() {
this.age++
}
}
继承、实现
类继承的两种方式：1 extends（继承父类） 2 implements（实现接口）。
说明：JS 中只有 extends，而 implements 是 TS 提供的。
class Dog extends Animal {
}
Person 类实现接口 Singable 意味着，Person 类中必须提供 Singable 接口中指定的所有方法和属性。
class Dog implements Singable {}
修饰符
可见性修饰符包括：1 public（公有的） 2 protected（受保护的） 3 private（私有的）。
只读修饰符
readonly：表示只读，用来防止在构造函数之外对属性进行赋值。
class Dog implements Singable {
readonly age: number
constructor(age: number) {
this.age = age
}
}
let dog = new Dog(22)
解释：
- 使用 readonly 关键字修饰该属性是只读的，注意只能修饰属性不能修饰方法。
- 接口或者 {} 表示的对象类型，也可以使用 readonly。
类型兼容性
类之间
我们先看一段代码，我们发现传递一个参数，ts 并没有给我们报错，我们点进去 forEach 方法看看。
arr.forEach(value => {})
我们发现，这是有三个参数的，但是为什么不报错呢，这就是类型兼容性。
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
TS 采用的是结构化类型系统，也叫做 duck typing（鸭子类型），类型检查关注的是值所具有的形状。
也就是说，在结构类型系统中，对于对象类型来说，y 的成员至少与 x 相同，则 x 兼容 y（成员多的可以赋值给少的）。（类型、名称必须相同）
在下面的代码中，我们把 Dog 类型强转成 Dog2 类型，但是并没有报错，这就是类型兼容，ts 认为他们形状一样。
成员多的类可以赋值给成员少的类。
class Dog {
x: number
constructor(x: number) {
this.x = x
}
}
class Dog2 {
x: number
constructor(x: number) {
this.x = x
}
}
let dog: Dog2 = new Dog(2)
接口之间
接口之间的兼容性，类似于 class。并且，class 和 interface 之间也可以兼容。
函数之间的兼容性
函数之间兼容性比较复杂，需要考虑：1 参数个数 2 参数类型 3 返回值类型。
参数个数，参数多的兼容参数少的（或者说，参数少的可以赋值给多的），这点与类和接口是相反的
type F1 = (a: number) => void
type F2 = (a: number, b: number) => void
let f1: F1
let f2: F2
f2 = f1
解释：
- 参数少的可以赋值给参数多的，所以，f1 可以赋值给 f2。
- 数组 forEach 方法的第一个参数是回调函数，该示例中类型为：(value: string, index: number, array: string[]) => void。
- 在 JS 中省略用不到的函数参数实际上是很常见的，这样的使用方式，促成了 TS 中函数类型之间的兼容性。
- 并且因为回调函数是有类型的，所以，TS 会自动推导出参数 item、index、array 的类型。
参数类型，相同位置的参数类型要相同或兼容。
interface P3D {
x: number
y: number
}
interface P4D {
x: number
y: number
z: number
}
type F3 = (p: P3D) => void
type F4 = (p: P4D) => void
let f3: F3
let f4: F4
// 参数少的复制给参数多的--可以
f4 = f3
解释：
- 注意，此处与前面讲到的接口兼容性冲突。
- 技巧：将对象拆开，把每个属性看做一个个参数，则，参数少的（f3）可以赋值给参数多的（f4）。
返回值类型，只关注返回值类型本身即可
接着上面的案例
type F3 = () => string
type F4 = () => string
let f3: F3
let f4: F4
f4 = f3
type F3 = () => {name: string}
type F4 = () => {name: string, age: number}
let f3: F3
let f4: F4
f4 = f3
解释：
- 如果返回值类型是原始类型，此时两个类型要相同，不一样，无法兼容
- 如果返回值类型是对象类型，此时成员多的可以赋值给成员少的（和类一样）
交叉类型
交叉类型（&）：功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）。
// 定义 Person 接口，包含 name 属性
interface Person {
name: string; // 姓名
}
// 定义 Contact 接口，包含 phone 属性
interface Contact {
phone: string; // 电话号码
}
// 定义 PersonDetail 类型，它同时具有 Person 和 Contact 接口的属性
type PersonDetail = Person & Contact;
// 创建一个符合 PersonDetail 类型的对象
let obj: PersonDetail = {
name: '', // 设置姓名为空字符串
phone: '' // 设置电话号码为空字符串
}
解释：使用交叉类型后，新的类型 PersonDetail 就同时具备了 Person 和 Contact 的所有属性类型。
交叉类型（&）和接口继承（extends）的对比：
- 相同点：都可以实现对象类型的组合。
- 不同点：两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同。
interface Person {
name: string
}
interface Contact extends Person{ // 此时这里会报错，提示 name 类型不兼容，因为父接口是 string，需要保持一致
name: number
}
通过交叉类型，既可以用 string 也可以用 number
// 定义 Person 接口，包含一个接受 number 类型参数并返回 string 类型的函数 fn
interface Person {
fn: (value: number) => string; // 接受 number 类型参数，返回 string 类型结果
}
// 定义 Contact 接口，包含一个接受 string 类型参数并返回 string 类型的函数 fn
interface Contact {
fn: (value: string) => string; // 接受 string 类型参数，返回 string 类型结果
}
// 定义 PersonDetail 类型，该类型同时具有 Person 和 Contact 接口的 fn 属性
type PersonDetail = Person & Contact;
// 创建一个符合 PersonDetail 类型的对象 c
let c: PersonDetail = {
// 实现 fn 属性，参数可以是 number 或 string 类型，返回值为 string 类型
fn(value: number | string): string {
return ''; // 返回空字符串
}
}
泛型 和 keyof
泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。
function id<T>(value: T): T {
return value
}
class Student {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
let student = new Student('佳佳', 21)
let id1 = id<Student>(student)
console.log(id1)
简化调用
ts 有类型推断机制，会根据传入的参数自动区分
// 显示传入类型参数
let id1 = id<Student>(student)
// 隐式传入
let id1 = id(student)
泛型约束
默认情况下，泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性。
我们传入一个字符串，在泛型函数中调用length 属性，是无法调用的。
解释：Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length。
此时，就需要为泛型添加约束来收缩类型（缩窄类型取值范围）。
那么我们如果想在泛型函数中，使用指定类型的数据。可以使用类型断言
function id<T>(value: T): T {
let t = value as Student
console.log(t.age)
return value
}
添加约束
通过 extends 关键字使用该接口，为泛型（类型变量）添加约束。
注意：传入的实参（比如，数组）只要有 length 属性即可，这也符合前面讲到的接口的类型兼容性。
// 定义一个接口 ILength，表示具有 length 属性的对象
interface ILength {
length: number; // 定义 length 属性为 number 类型
}
// 定义一个泛型函数 id，接受一个类型 T，要求 T 必须扩展自 ILength 接口
function id<T extends ILength>(value: T): T {
console.log(value.length); // 打印参数 value 的 length 属性
return value; // 返回参数 value，类型为 T
}
// 定义一个 Student 类
class Student {
name: string;
age: number;
// 构造函数，接受 name 和 age 参数
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let student = new Student('佳佳', 21);
// 由于 Student 类型不满足泛型约束（缺少 length 属性），所以会导致类型错误
let id1 = id(student); // 编译错误：Type 'Student' does not satisfy the constraint 'ILength'
keyof
keyof 关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型。
也就是说，keyof 会把对象类型中的key全部联合起来
// 定义一个泛型函数 id，接受两个参数：value 和 key
// value 的类型是 T，key 的类型是 T 的属性键
function id<T, K extends keyof T>(value: T, key: K) {
return value[key]; // 返回 value 对象中 key 属性的值
}
// 定义一个对象 person，包含 name 和 age 属性
let person = {name: 'jack', age: 18};
// 调用 id 函数，传入 person 对象和 'age' 字符串作为 key
let id1 = id(person, 'age');
解释：
- 添加了第二个类型变量 Key，两个类型变量之间使用（,）逗号分隔。
- keyof 关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型。
- value 的类型是 T，key 的类型是 T 的属性键
- 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性。
泛型接口
泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性。
// 定义一个泛型接口 IdFunc<T>，表示具有 id 和 ids 方法的对象
interface IdFunc<T> {
id: (value: T) => T; // id 方法接受一个类型为 T 的参数，并返回类型为 T 的值
ids: () => []; // ids 方法不接受参数，返回一个空数组
}
// 创建一个符合 IdFunc<number> 类型的对象 obj
let obj: IdFunc<number> = {
// 实现 id 方法，接受一个 number 类型的参数并返回 number 类型的值
id(value: number): number {
return 0; // 返回数字 0
},
// 实现 ids 方法，不接受参数，返回一个空数组
ids(): [] {
return []; // 返回空数组
}
}
解释：
- 在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。
- 接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。
- 使用泛型接口时，需要显式指定具体的类型（比如，此处的 IdFunc<nunber>）。
- 此时，id 方法的参数和返回值类型都是 number；ids 方法的返回值类型是 number[]。
数组泛型接口
实际上，JS 中的数组在 TS 中就是一个泛型接口。
泛型类
由于构造方法传递参数了，所以 TS 可以推导出是什么类型，如果构造方法没有参数，需要指定类型。
类似于泛型接口，在创建 class 实例时，在类名后面通过 <类型> 来指定明确的类型。
// 定义一个泛型类 GenericNumber<T>
class GenericNumber<T> {
value: T;
constructor(value: T) {
this.value = value;
}
}
// 创建一个 GenericNumber 类的实例，传入 number 类型的值 200
let genericNumber = new GenericNumber(200);
// 下面的代码会导致编译错误
let genericNumber1 = new GenericNumber();
泛型工具类型
泛型工具类型：TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作。
说明：它们都是基于泛型实现的（泛型适用于多种类型，更加通用），并且是内置的，可以直接在代码中使用。
这些工具类型有很多，主要学习以下几个：
Partial
泛型工具类型 - Partial<Type> 用来构造（创建）一个类型，将 Type 的所有属性设置为可选。
// 定义一个接口 Props，表示具有 id 和 children 属性的对象
interface Props {
id: string;
children: number[];
}
// 使用 Partial<Props> 创建类型别名 PartialProps，表示 Props 类型属性都是可选属性
type PartialProps = Partial<Props>;
// 创建变量 a，类型为 PartialProps，即 Props 类型的部分可选属性
let a: PartialProps = {
// 这里没有提供任何属性，a 是一个空对象，所有属性都是可选的
}
除此之外，还有 Readonly 表示只读
Pick
泛型工具类型 - Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。
// 定义一个接口 Props，表示具有 id、title 和 children 属性的对象
interface Props {
id: string;
title: string;
children: number[];
}
// 使用 Pick<Props, 'id' | 'title'> 创建类型别名 PartialProps，表示从 Props 类型中挑选 'id' 和 'title' 属性
type PartialProps = Pick<Props, 'id' | 'title'>;
// 创建变量 obj，类型为 PartialProps，即 Props 类型的部分属性
let obj: PartialProps = {
id: '', // 设置 id 属性为字符串类型的空值
title: '' // 设置 title 属性为字符串类型的空值
}
解释：
- Pick 工具类型有两个类型变量：1 表示选择谁的属性 2 表示选择哪几个属性。
- 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
- 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
- 构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。
Record
泛型工具类型 - Record<Keys,Type> 构造一个对象类型，属性键为 Keys，属性类型为 Type。
解释：
- Record 工具类型有两个类型变量：1 表示对象有哪些属性 2 表示对象属性的类型。
- 构建的新对象类型 RecordObj 表示：这个对象有三个属性分别为a/b/c，属性值的类型都是 string[]。
// 使用 Record<'id' | 'title', string[]> 创建类型别名 PartialProps
// 表示一个对象，具有 'id' 和 'title' 两个属性，且它们的值都是 string 类型的数组
type PartialProps = Record<'id' | 'title', string[]>;
// 创建变量 obj，类型为 PartialProps，即具有 'id' 和 'title' 属性的对象
let obj: PartialProps = {
id: [], // 设置 id 属性为字符串数组类型的空数组
title: [] // 设置 title 属性为字符串数组类型的空数组
}
索引签名
绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型。
使用场景：当无法确定对象中有哪些属性（或者说对象中可以出现任意多个属性），此时，就用到索引签名类型了。
// 定义一个接口 Props，表示具有任意字符串键和字符串值的对象
interface Props {
[key: string]: string;
}
// 创建变量 obj，类型为 Props，即具有任意字符串键和字符串值的对象
let obj: Props = {
id: '', // 键为 'id'，值为字符串类型的空字符串
title: '', // 键为 'title'，值为字符串类型的空字符串
aaa: '' // 键为 'aaa'，值为字符串类型的空字符串
}
解释：
- 使用 [key: string] 来约束该接口中允许出现的属性名称。表示只要是 string 类型的属性名称，都可以出现在对象中。
- 这样，对象 obj 中就可以出现任意多个属性（比如，a、b 等）。
- key 只是一个占位符，可以换成任意合法的变量名称。
- 隐藏的前置知识：JS 中对象（{}）的键是 string 类型的。
数组索引签名类型
在 JS 中数组是一类特殊的对象，特殊在数组的键（索引）是数值类型。
并且，数组也可以出现任意多个元素。所以，在数组对应的泛型接口中，也用到了索引签名类型。
解释：
- MyArray 接口模拟原生的数组接口，并使用 [n: number] 来作为索引签名类型。
- 该索引签名类型表示：只要是 number 类型的键（索引）都可以出现在数组中，或者说数组中可以有任意多个元素。
- 同时也符合数组索引是 number 类型这一前提。
// 定义一个泛型接口 Props<T>，表示具有数字索引和值类型为 T 的对象或数组
interface Props<T> {
[n: number]: T; // 数字索引签名，表示可以用数字索引来访问元素，值的类型是 T
}
// 创建一个变量 arr，类型为 Props<number>，即数字索引对应的值类型为 number
let arr: Props<number> = [1, 3, 4, 5, 6, 7, 8];
映射类型
映射类型：基于旧类型创建新类型（对象类型），减少重复、提升开发效率。
根据联合类型
// 定义 PropKeys 类型为 'x' | 'y' | 'z' | 'k'
type PropKeys = 'x' | 'y' | 'z' | 'k';
// 定义 Type1 类型，其属性为 PropKeys 中的每个键对应一个 number 类型的值
type Type1 = { [key in PropKeys]: number };
// 创建一个符合 Type1 类型定义的对象
let obj: Type1 = {
k: 0, // 属性 'k' 的值为 number 类型
x: 0, y: 0, z: 0 // 属性 'x'、'y'、'z' 的值都为 number 类型
};
解释：
- 映射类型是基于索引签名类型的，所以，该语法类似于索引签名类型，也使用了 []。
- Key in PropKeys 表示 Key 可以是 PropKeys 联合类型中的任意一个，类似于 forin(let k in obj)。
- 使用映射类型创建的新对象类型 Type2 和类型 Type1 结构完全相同。
- 注意：映射类型只能在类型别名中使用，不能在接口中使用。
根据对象生成
type Props = { a: number, b: string, c: boolean };
// 定义 Type1 类型，其属性为 Props 类型中每个属性的键，并且值的类型都为 number
type Type1 = { [key in keyof Props]: number };
// 创建一个符合 Type1 类型定义的对象
let obj: Type1 = {
a: 0, // 属性 'a' 的值为 number 类型
b: 0, // 属性 'b' 的值为 number 类型
c: 0 // 属性 'c' 的值为 number 类型
};
解释：
- 首先，先执行 keyof Props 获取到对象类型 Props 中所有键的联合类型即，'a' | 'b' | 'c'。
- 然后，Key in ... 就表示 Key 可以是 Props 中所有的键名称中的任意一个。
Partial 的实现
实际上，前面讲到的泛型工具类型（比如，Partial<Type>）都是基于映射类型实现的。
比如，Partial<Type> 的实现：
解释：
- keyof T 即 keyof Props 表示获取 Props 的所有键，也就是：'a' | 'b' | 'c'。
- 在 [] 后面添加 ?（问号），表示将这些属性变为可选的，以此来实现 Partial 的功能。
- 冒号后面的 T[P] 表示获取 T 中每个键对应的类型。比如，如果是 'a' 则类型是 number；如果是 'b' 则类型是 string。
- 最终，新类型 PartialProps 和旧类型 Props 结构完全相同，只是让所有类型都变为可选了。
索引查询（访问）类型
刚刚用到的 T[P] 语法，在 TS 中叫做索引查询（访问）类型。
作用：用来查询属性的类型。
type Props = { a: number, b: string, c: boolean };
// 定义 ta 类型为 Props 中属性 'a' 的类型，即 number
type ta = Props['a'];
// 创建一个变量 s，其类型为 ta，即 number
let s: ta = 2222; // 变量 s 被赋值为 number 类型的值 2222
解释：Props['a'] 表示查询类型 Props 中属性 'a' 对应的类型 number。所以，TypeA 的类型为 number。
注意：[] 中的属性必须存在于被查询类型中，否则就会报错。
同时多个
索引查询类型的其他使用方式：同时查询多个索引的类型
解释：使用字符串字面量的联合类型，获取属性 a 和 b 对应的类型，结果为： string | number。
解释：使用 keyof 操作符获取 Props 中所有键对应的类型，结果为： string | number | boolean
type Props = { a: number, b: string, c: boolean }
// string | number
type ta = Props['a' | 'b']
// string | number | boolean
type ta2 = Props[keyof Props]
TS 类型声明文件
类型声明文件：用来为已存在的 JS 库提供类型信息。
TS 的两种文件类型
TS 中有两种文件类型：1 .ts 文件 2 .d.ts 文件。
- .ts 文件：
既包含类型信息又可执行代码。
可以被编译为 .js 文件，然后，执行代码。
用途：编写程序代码的地方。
- .d.ts 文件：
只包含类型信息的类型声明文件。
不会生成 .js 文件，仅用于提供类型信息。
用途：为 JS 提供类型信息。
总结：.ts 是 implementation（代码实现文件）；.d.ts 是 declaration（类型声明文件）。
如果要为 JS 库提供类型信息，要使用 .d.ts 文件。
类型声明文件的使用说明
在使用 TS 开发项目时，类型声明文件的使用包括以下两种方式：
-
使用已有的类型声明文件
-
创建自己的类型声明文件
使用已经有的类型声明文件
在 axios 中存在 index.d.ts 这个就是类型声明文件
它在哪里使用的呢？
在 package.json 中 typings 设置了类型声明文件的路径。
第二种方式 由 DefinitelyTyped 提供。
DefinitelyTyped 是一个 github 仓库，用来提供高质量 TypeScript 类型声明。
可以通过 npm/yarn 来下载该仓库提供的 TS 类型声明包，这些包的名称格式为：@types/*。
比如，@types/react、@types/lodash 等。
当安装 @types/* 类型声明包后，TS 也会自动加载该类声明包，以提供该库的类型声明。
补充：TS 官方文档提供了一个页面，可以来查询 @types/* 库。
查询地址 www.npmjs.com/~types
可以通过 npm/yarn 来下载该仓库提供的 TS 类型声明包，这些包的名称格式为：@types/*。
比如，@types/react、@types/lodash 等
创建自己的类型文件
创建自己的类型声明文件：1 项目内共享类型 2 为已有 JS 文件提供类型声明。
项目内共享类型：如果多个 .ts 文件中都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型共享。
操作步骤：
- 创建 index.d.ts 类型声明文件。
- 创建需要共享的类型，并使用 export 导出（TS 中的类型也可以使用 import/export 实现模块化功能）。
- 在需要使用共享类型的 .ts 文件中，通过 import 导入即可（.d.ts 后缀导入时，直接省略）。
type Props = { a: number, b: string, c: boolean }
export {Props}
为已有 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 文件）已存在的变量声明类型，而不是创建一个新的变量。
- 对于 type、interface 等这些明确就是 TS 类型的（只能在 TS 中使用的），可以省略 declare 关键字。
- 对于 let、function 等具有双重含义（在 JS、TS 中都能用），应该使用 declare 关键字，明确指定此处用于类型声明。