--- theme: fancy highlight: xcode --- # 一、前言最近入职了新公司也有两个月左右了，公司主要技术栈是 **React** 和 **TS**，然而我平时用的TS并不多，刚好借此机会最近也是好好的学习了一番TS的高级工具类型及其源码 > 本文主要介绍的是**TS的高级类型工具**，含有TS高级类型工具的**源码解释**，及其**示例**，需要对TS有一定**了解**，或者已经实际用过一段时间 # 二、前置知识 ## 1、关键字 extends 准确的来说这是一个`条件类型`，它借用了 javascript 的**条件运算符**，语法如下 ```js T extends U ? X :Y ``` 解释： - 在该语法示例中， extends 是**关键字**； T、 U、 X 和 Y 均表示一种**类型**。 - 若类型 T 能`赋值`给类型 U，则**条件类型的结果**就是类型 X，反之结果为类型 Y - 当然这个关键字如果用到 interface 上就是**继承**的作用了，这儿就不做过多的解释
## 2、关键字 in 这是一个遍历语法的关键字，语法如下 ```js type K = "a" | "b" type B = { [P in K]: number } // { a: number; b: number} ``` 解释： - 在结果对象类型中创建一个新的属性成员，属性名为P，属性值为 number - P 是**类型变量**，代表每次遍历出来的成员类型，并且 P 可以作为**对象属性值**的类型类似这样：`[P in K]: P` - K 表示**要遍历的类型**，由于遍历的结果类型要作为**对象属性名**，因此类型 K 必须能够赋值给联合类型 `string | number | symbol`
## 3、关键字 readonly 这个比较简单，就代表了这个类型是否为`只读类型` ```js interface A { readonly a: string; b: number; } const test: A = { a: "", b: 0 } test.b = 1; // test.a = "1" // a 为 readonly 不可更改 ```
## 4、关键字 keyof 用来获取一个类型的**键值**，并`返回一个联合类型` ```js interface A { a: number; b: string; } type B = keyof A; // "a" | "b" ```
## 5、关键字 typeof 这是一个**类型查询**的关键字，可以获取`操作数的类型` ```js const A = { a: 1, b: "2" } type B = typeof A; // { a: number; b: string } ```
## 5、关键字 infer 这个关键字主要用来定义一个**可推断**的类型, 用的比较多的地方就是用来`获取函数的参数类型` ```js type CT = T extends Array ? U : never; type T = CT> // number type CT1 = T extends (arg: infer U) => void ? U : T; type T1 = CT1<(a: boolean) => void> // boolean ```
## 6、修饰符的加减 TS中引入了两个修饰符来**精确控制**添加或者移除映射属性的 `"?" 修饰符`和 `readonly 修饰符` ```js type T0 = { -readonly [P in keyof T]-?: T[P] }; type T1 = { +readonly [P in keyof T]+?: T[P] }; ``` 解释： - "+" 修饰符，为映射属性**添加** "?" 修饰符或者 readonly - "-" 修饰符，为映射属性**移除** "?" 修饰符或者 readonly - "+" 或者 "-" 修饰符**必须应用**在 "?" 修饰符或者 readonly **之前** - 对于 "+" 修饰符，明确的添加与省略它的作用是相同的，所以通常都省略。例如 `"+readonly" 等同于 "readonly"` # 三、高级类型工具 ## 1. `Partial` `源码：` ```js type Partial = { [P in keyof T]?: T[P]; }; ``` > 该工具类型可以构造一个**新的类型**，并把实际类型参数 T 中的属性`全变成可选属性` ```js interface A { x: number; y: number; } type T = Partial; // {x?number; y?:number}} ```
## 2. `Required` `源码：` ```js type Required = { [P in keyof T]-?: T[P]; }; ``` > 和 **Partial** 相反，把T 中的属性`全变成必选属性` ```js interface A { x?: number; y: number; } type T = Required ; // {x:number; y:number}} ```
## 3. `Readonly` `源码：` ```js type Readonly = { readonly [P in keyof T]: T[P]; }; ``` > 该工具类型可以构造一个**新的类型**，并将类型参数 T 中的所有属性变成`只读属性` ```js interface A { x: number; y: number; } type T = Readonly ; // {x:number; y:number}} const a: T = { x: 0, y: 0 } // a.x = 1 无法分配到 "x" ，因为它是只读属性 // a.y = 1 无法分配到 "y" ，因为它是只读属性 ```
## 4. `Record` `源码：` ```js type Record = { [P in K]: T; }; ``` > 该工具类型可以使用给定的 **对象属性名**类型和 **对象属性**类型，`创建一个新的对象类型` ```js type K = 'x' | 'y'; type T = number; type R = Record; // {x:number; y:number}} const a: R = { x: 0, y: 0 } ```
## 5. `Exclude` `源码：` ```js type Exclude = T extends U ? never : T; ``` > 该工具类型可以从类型 T 中`剔除`所有**可以赋值给类型 U 的类型** ```js type T0 = Exclude<"a" | "b", 'x'>; // "a" | "b" type T1 = Exclude void), Function>; // string ```
## 6. `Extract` `源码：` ```js type Extract = T extends U ? T : never; ``` > 该工具类型和 **Exclude类型互补**，它能从类型 T 中`获取`所有**可以赋值给类型 U 的类型** ```js type T0 = Extract<"a" | "b", 'a'>; // "a" type T1 = Extract void), Function>; // () => void type T2 = Extract<"a" | "b", 'c'>; // never ```
## 7. `Pick` `源码：` ```js type Pick = { [P in K]: T[P]; }; ``` > 该工具能出已有对象类型中`选取给定的属性以及其类型`，然后**构建一个新的对象类型** ```js interface A { x: number; y: number; } type T0 = Pick; // {x:number} type T1 = Pick; // {x:number; y:number} // type T3 = Pick 类型“"z"”不满足约束“keyof A” ```
## 8. `Omit` `源码：` ```js type Omit = Pick>; ``` > 该工具与 **Pick 类型互补**，能从已有对象类型中`剔除给定的属性`，然后构建一个新的对象类型 ```js interface A { x: number; y: number; } type T0 = Omit; // {y:number} type T1 = Omit; // {} type T3 = Omit; // {} ```
## 9. `NonNullable` `源码：` ```js type NonNullable = T extends null | undefined ? never : T; ``` > 该工具类型能从类型 T 中`剔除 null 和 undefined 类型`，并**构建一个新的类型** ```js type T0 = NonNullable; // string | number ```
## 10. `Parameters` `源码：` ```js type Parameters any> = T extends (...args: infer P) => any ? P : never; ``` > 该工具类型能`获取函数类型 T 的参数类型`，并使用参数类型构建一个**元组类型** ```js type T0 = Parameters<() => void>; // [] type T1 = Parameters<(a: string) => void>; // [string] type T2 = Parameters<(a: string, b: number) => void>; // [string, number] type T3 = Parameters<(x: { a: number, b: string }) => void>; // [{ a: number; b: string }] ```
## 11. `ConstructorParameters` `源码：` ```js type ConstructorParameters any> = T extends abstract new (...args: infer P) => any ? P : never; ``` > 该工具类型能获取`构造函数 T 中的参数类型`，并使用参数类型构造一个**元组类型**。若 T 不是函数类型，则`返回 never 类型 ```js type T0 = ConstructorParameters object>; // [s?: string | undefined] ```
## 12. `ReturnType` `源码：` ```js type ReturnType any> = T extends (...args: any) => infer R ? R : any; ``` > 该工具类型能获取`函数类型 T 的返回值类型` ```js type T0 = ReturnType<() => string>; // string type T1 = ReturnType<() => { a: string, b: number }>; // { a: string; b: number } ```
## 13. `InstanceType` `源码：` ```js type InstanceType any> = T extends abstract new (...args: any) => infer R ? R : any; ``` > 该工具类型能获取`构造函数的返回值类型` ```js class A { x = 0; } type T0 = InstanceType; // A type T1 = InstanceType object>; // object ```
## 14. `ThisParameterType` `源码：` ```js type ThisParameterType = T extends (this: infer U, ...args: any[]) => any ? U : unknown; ``` > 该工具类型能`获取函数类型 T 中的 this 参数类型`，若函数类型定义中没有 this 参数，则返回 **unknown 类型** ```js function fn(this: object, x: number) { } function fn1(x: number) { } type T0 = ThisParameterType // object type T1 = ThisParameterType // unknown ```
## 15. `OmitThisParameter` `源码：` ```js type OmitThisParameter = unknown extends ThisParameterType ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T; ``` > 该工具类型能从类型 T 中`剔除 this 参数类型`，并**构造一个新类型** ```js function fn(this: object, x: number) { } type T0 = OmitThisParameter // (x: number) => void ``` # 四、结语本文中，对常见的关键字和常用的高级类型工具进行了讲解，主要平时开发的时候还是要多用、多积累。最后，文中如有错误，欢迎大家在评论区指正，如果本文对你有帮助，记得`点赞👍`和`关注❤️` `如需转载请标明作者和出处`