大家好，我是沐华，本文主要剖析 `TS` 开发中常见工具类型的源码实现及使用方式，并且搭配与内容结合的练习，方便更好的理解和掌握，本文目标： - 更加深入的理解和掌握泛型 - 更加熟练这些内置工具类型在项目中的运用 ### Exclude `Exclude`：作用简单说就是把 `T` 里面的 `U` 去掉，再返回 `T` 里还剩下的。`T` 和 `U` 必须是同种类型(具体类型/字面量类型)。如下 ```ts type T1 = Exclude; // type T1 = number; // 上面这个肯定一看就懂，那下面这样呢 type T2 = Exclude<'a' | 'b' | 'c', 'b' | 'd'>; // type T2 = 'a' | 'c'; ``` 怎么就剩个 `a | c` 了？这怎么执行的？先看一张图 ![75c8b9738b63d4720d84d39eca8edc6.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/630dae77a48949ab9ad55b90613537f8~tplv-k3u1fbpfcp-watermark.image?) 三元表达式大家都知道，不是返回 `a` 就是返回 `b`，这么算的话，这个 `some` 的类型应该是 `b` 才对呀，可这个结果是 `a | b` 又是怎么回事呢，这都是由于 `TS` 中的**拆分**或者说叫**分发**机制导致的简单说就是**联合类型并且是裸类型就会产生分发，分发就会把联合类型中的每一个类型单独拿去判断，最后返回结果组成的联合类型**，`a | b` 就是这么来的，这个特性在本文后面会提到多次所以铺垫一下，这也是为什么反 `Exclude` 放在开头的原因结合 `Exclude` 的实现和例子来理解下 ```ts // 源码定义 type Exclude = T extends U ? never : T; // 例子 type T2 = Exclude<'a' | 'b' | 'c', 'b' | 'd'>; // type T2 = 'a' | 'c'; ``` 上面例子中的执行逻辑： - 由于分发会把联合类型中的每一个类型单独拿去判断的原因，会先把 `T` ，也就是前面 `a | b | c` 给拆分再单独放入 `T extends U ? never : T` 判断 - 第一次判断 `a(T就是a) ` ，`U` 就是 `b | d` ，`T` 并没有继承自 `U`，判断为假，返回 `T` 也就是 `a` - 第二次判断放入 `b` 判断为真，返回 `never`，`ts` 中的 `never` 我们知道就是不存在值的意思，连 `undefined` 都没有，所以 `never` 会被忽略，不会产生任何效果 - 第三次判断放入 `c`，判断为假，和 `a` 同理 - 最后**将每一个单独判断的结果组成联合类型返回**，`never` 会忽略，所以就剩下 `a | c` > 总之就是：如果 `T extends U` 满足分发的条件，就会把所有单个类型依次放入判断，最后返回记录的结果组合的联合类型 ### Extract `Extract`：作用是取出 `T` 里面的 `U` ，返回。作用和 `Exclude` 刚好相反，传参也是一样的看例子理解 `Extract` ```ts type T1 = Extract<'a' | 'b' | 'c', 'a' | 'd'>; // type T1 = 'a'; // 源码定义 type Extract = T extends U ? T : never ``` 和 `Exclude` 源码对比也只是三元表达式返回的 never : T 对调了一下，执行原理也是一样一样儿的，就不重复了 ### Omit `Omit`：作用是把 `T(对象类型)` 里边的 `K` 去掉，返回 `T` 里还剩下的 `Omit` 的作用和 `Exclude` 是一样的，都能做类型过滤并得到新类型。不同的是 `Exclude` 主要是处理联合类型，且会触发分发，而 `Omit` 主要是处理对象类型，所以自然的这俩参数也不一样。用法如下 ```ts // 这种场景 type 和 interface 是一样的，后面就不重复说明了 type User = { name: string age: number } type T1 = Omit // type T1 = { name: string } ``` 源码定义 ```ts // keyof any 就是 string | number | symbol type Omit = { [P in Exclude]: T[P]; } ``` - 首先第一个参数 `T` 要传对象类型， `type` 或 `interface` 都可以 - 第二个参数 `K` 限制了类型只能是 `string | number | symbol`，这一点跟 `js` 里的对象是一个意思，对象类型的属性名只支持这三种类型 - `in` 是映射类型，用来映射遍历枚举类型。大白话就是循环、循环语法，需要配合联合类型来对类型进行遍历。`in` 的右边是可遍历的枚举类型，左边是遍历出来的每一项 - 用 `Exclude` 去除掉传入的属性后，再遍历剩下的属性，生成新的类型返回示例解析： ```ts type User = { name: string age: number gender: string } type Omit = { [P in Exclude]: T[P]; } type T1 = Omit // type T1 = { name: string, gender: string } ``` 我们调用 `Omit` 传入的参数是正确的，所以就分析一下后面的执行逻辑： - `Exclude` 等于 `Exclude<'name'|'age'|'gender', 'age'>`，返回的结果就是 `'name'|'gender` - 然后遍历 `'name'|'gender'`，第一次循环 `P` 就是 `name`，返回 `T[P]` 就是 `User['name']` - 第二次循环 `P` 就是 `gender`，返回 `T[P]` 就是 `User['gender']`，然后循环结束 - 结果就是 `{ name: string, gender: string }` ### Pick `Pick` ：作用是取出 `T(对象类型)` 里边儿的 `K`，返回。好像和 `Omit` 刚好相反，`Omit` 是不要 `K` ，`Pick` 是只要 `K` 传参方式和 `Omit` 是一样的，就不赘述了，用法示例： ```ts type User = { name: string age: number gender: string } type T1 = Pick // type T1 = { name: string, gender: string } ``` 源码定义 ```ts type Pick = { [P in K]: T[P]; } ``` - 可以看到等号左边做了泛型约束，限制了第二个参数 `K` 必须是第一个参数 `T` 里的属性。 - 如果第二个参数传入联合类型，会触发分发，以此来确保准确性，联合类型中的每一个单独类型都必须是第一个对象类型中的属性(不限制的话右边就要出错了) - 参数都正确之后，等号右边的逻辑其实就是和 `Omit` 一模一样的了，直接遍历 `K`，取出返回就完事儿了 ### 练习一请利用本文上述内容完成：基于如下类型，实现一个去掉了 `gender` 的新类型，实现方法越多越好 ```ts type User = { name: string age: number gender: string } ``` 这个？ ```ts type T1 = { name: string, age: number } ``` ？？？我写了几个，欢迎补充： ```ts type T1 = Omit type T2 = Pick type T3 = Pick> type T4 = { [P in 'name' | 'age'] : User[P] } type T5 = { [P in Exclude] : User[P] } ``` ### Record `Record`：作用是自定义一个对象。`K` 为对象的 `key` 或 `key` 的类型，`T` 为 `value` 或 `value` 的类型。你有没有这样用过 ↓ ```ts const obj:any = {} ``` 反正我有，其实用 `Record` 定义对象，在工作中还是很好用的，而且非常灵活，不同的对象定义上也会有一点区别，如下 **空对象** ```ts // never，会限制为空对象 // any 指的是 string | number | symbol 这几个类型都行 type T1 = Record let obj1:T1 = {} // ok // let obj1:T1 = {a:1} 这样不行，只能是空对象 ``` **任意对象** ```ts // 任意对象，unknown 或 {} 表示对象内容不限，空对象也行 type T1 = Record // 或 type T1 = Record let obj2:T1 = {} // ok let obj3:T1 = {a:1} // ok ``` **自定义对象 key** ```ts type keys = 'name' | 'age' type T1 = Record let obj1:T1 = { name: '沐华', age: '18' // age: 18 报错，第二个参数 string 表示 value 值都只能是 string 类型 } // 如果需要 value 是任意类型，下面两个都行 type T2 = Record type T3 = Record ``` **自定义对象 value** ```ts type keys = 'a' | 'b' // type 或 interface 都一样 type values = { name?: T, age?: T, gender?: string } // 自定义 value 类型 type T1 = Record> let obj:T1 = { a: { name: '沐华' }, b: { age: 18 } } // 固定 value 值 type T2 = Record let obj1:T2 = { a: 111, b: 111 } ``` 源码定义 ```ts type Record = { [P in K]: T; } ``` 左边限制了第一个参数 `K` 只能是 `string | number | symbol` 类型，可以是联合类型，因为右边遍历 `K` 了，然后遍历出来的每个属性的值，直接赋值为传入的第二个参数 ### Partial `Partial`：作用生成一个将 `T(对象类型)` 里所有属性都变成可选的之后的新类型示例如下： ```ts type User = { name: string age: number } type T1 = Partial // 简单说 T1 和 T2 是一模一样的 type T2 = { name?: string age?: number } ``` 源码定义 ```ts type Partial = { [P in keyof T]?: T[P]; } ``` 这下看源码定义的是不是特别简单，就是循环传进来的对象类型，给每个属性加个 `?` 变成可选属生 ### Required `Required`：作用和 `Partial` 刚好相反，`Partial` 是返回所有属性都是**非必填**的对象类型，而 `Required` 则是返回所有属性都是**必填项**的对象类型。参数 `T` 也是一个对象类型。示例： ```ts type User = { name?: string age?: number } type T1 = Required // 简单说 T1 和 T2 是一模一样的 type T2 = { name: string age: number } ``` 源码定义 ```ts type Required = { [P in keyof T]-?: T[P]; } ``` 和 `Partial` 的源码定义相比基本一样的，只是这里多了个减号 `-`，没错，就是减去的意思，`-?` 就是去掉 `?`，然后就变成必填项了，这样解释是不是很好理解 ### Readonly `Readonly` ：作用是返回一个所有属性都是只读不可修改的对象类型，与 `Partial` 和 `Required` 是非常相似的。参数 `T` 也是一个对象类型。示例： ```ts type User = { name: string age?: number } type T1 = Readonly // 简单说 T1 和 T2 是一模一样的 type T2 = { readonly name: string readonly age?: number } ``` ```ts type Readonly = { readonly [P in keyof T]: T[P]; } ``` 怎么样？看到这是不是越发觉得源码的类型定义越看越简单了我：那是不是说把所有只读类型，全都变成非只读就只需要 `-readonly` 就行了？你：是的，说得很对，就是这样的 ### 练习二从上面几个工具类型的源码定义中我们可以发现，都只是简单的一层遍历，就好像 `js` 中的浅拷贝，比如有下面这样一个对象 ```ts type User = { name: string age: number children: { boy: number girl: number } } ``` 要把这样一个对象所有属性都改成可选属性，用 `Partial` 就行不通了，它只能改变第一层，`children` 里的所有属性都改不了，所以请写一个可以实现的类型，功能类似深拷贝的意思先稍微想想再往下看答案哟写出来一个的话，`Partial` 、`Required` 、 `Readonly` 的 “深拷贝” 类型是不是就都有了呢想一下 ```ts // Partial 源码定义 type Partial = { [P in keyof T]?: T[P]; } // 递归 Partial type DeepPartial = T extends object ? { [P in keyof T]?: DeepPartial }:T; ``` 外层再加了一个三元表达式，如果不是对象类型直接返回，如果是就遍历；然后属性值改成递归调用就可以了 ```ts // 递归 Required type DeepRequired = T extends object ? { [P in keyof T]-?: DeepRequired }:T; // 递归 Readonly type DeepReadonly = T extends object ? { readonly [P in keyof T]: DeepReadonly }:T; ``` ### NonNullable `NonNullable`：作用是去掉 `T` 中的 `null` 和 `undefined`。`T` 为字面量/具体类型的联合类型，如果是对象类型是没有效果的。如下 ```ts type T1 = NonNullable; // type T1 = string | number type T2 = NonNullable; // type T2 = string[] type T3 = { name: string age: undefined } type T4 = NonNullable // 对象是不行的 ``` 源码定义 ```ts // 4.8版本之前的版本 type NonNullable = T extends null | undefined ? never : T; // 4.8 type NonNullable = T & {} ``` `TS 4.8版本` 之前的就是用一个三元表达式来过滤 `null | undefined`。而在 `4.8` 版本直接就是 `T & {}`，这是什么原理呢？其实是因为这个版本对 `--strictNullChecks` 做了增加，这主要体现还是在联合类型和交叉类型上，为什么这么说？在 `js` 中都知道万物皆对象，原型链的最终点的正常对象就是 `Object` 了(`null` 算不正常的)，数据类型都是在原型链中继承于 `Object` 派生出来的。在 `ts` 中也一样，由于 `{}` 是一个空对象，所以除了 `null` 和 `undefined` 之外的基础类型都可以视作继承于 `{}` 派生出来的。或者说如果一个值不是 `null` 和 `undefined` 就等于 `这个值 & {}` 的结果，如下 ```ts type T1 = 'a' & {}; // 'a' type T2 = number & {}; // number type T3 = object & {}; // object type T4 = { a: string } & {}; // { a: string } type T5 = null & {}; // never type T6 = undefined & {}; // never ``` 如果 `T & {}` 中的 `T` 不是 `null/undefined` 就可以认为它肯定符合 `{}` 类型，就可以把 `{}` 从交叉类型中去掉了，如果是，则会被判为 `never`，而 `never` 是会被忽略的(上面 `Exclude` 源码定义里有提到)，所以在结果里自然就排除掉了 `null` 和 `undefined`。还有如果 `T & {}` 中的 `T` 是联合类型，是会触发分发的，这个就不再解释了 ### 练习三请实现一个能去掉对象类型中 `null` 和 `undefined` 的类型 ```ts // 需要把如下类型变成 { name: string } type User = { name: string age: null, gender: undefined } // 实现如下 type ObjNonNullable = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] }; type T1 = ObjNonNullable // type T1 = { name: string } ``` 这里出现了一个本文第一次出现的关键字 `as`，我们知道它可以用来断言，在 `ts 4.1` 版本可以在映射类型里用 `as` 实现键名重新映射，达到过滤或者修改属性名的目的，如果指定的类型解析为 `never` 时，会被忽略不会生成这个属性如上只能过滤对象第一层的 `null` 和 `undefined` 如何更进一步改成可以递归的呢？ ```ts type User = { name: string age: undefined, children: { boy: number girl: number neutral: null } } // 递归处理对象类型的 DeepNonNullable type DeepNonNullable = T extends object ? { [P in keyof T as T[P] extends null | undefined ? never : P]: DeepNonNullable } : T; type T1 = DeepNonNullable // type T1 = { // name: string; // children: { // boy: number; // girl: number; // }; //} ``` ### Awaited `Awaited`：作用是获取 `async/await` 函数或 `promise` 的 `then()` 方法的返回值的类型。而且自带递归效果，如果是这样嵌套的异步方法，也能拿到最终的返回值类型示例： ```ts // Promise type T1 = Awaited>; // type T1 = string // 嵌套 Promise，会递归 type T2 = Awaited>>; // type T2 = number // 联合类型，会触发分发 type T3 = Awaited>; // type T3 = number | boolean ``` 来看下源码定义，看下到底是怎么执行的，是怎么拿到结果的呢？ ```ts // 源码定义 type Awaited = T extends null | undefined ? T : T extends object & { then(onfulfilled: infer F): any } ? F extends (value: infer V, ...args: any) => any ? Awaited : never : T ``` 泛型条件有点多，就换了下行，方便看 - 如果 `T` 是 `null` 或 `undefined` 就直接返回 `T` - 如果 `T` 是对象类型，并且里面有 `then` 方法，就用 `infer` 类型推断出 `then` 方法的第一个参数`onfulfilled` 的类型赋值给 `F`，`onfulfilled` 其实就是我们熟悉的 `resolve`。所以这里可以看出或者准确的说，`Awaited` 拿的不是 `then()` 的返回值类型，而是 `resolve()` 的返回值类型 - 既然 `F` 是回调函数 `resolve` ，就推断出该函数第一个参数类型赋值给 `V` ，`resolve` 的参数自然就是返回值 - 传入 `V` 递归调用 - `F` 不是函数就返回 `never` - 如果 `T` 不是对象类型或者是对象但没有 `then` 方法，返回 `T` ，就是最后一行的 `T` ### Parameters `Parameters`：作用是获取函数所有参数的类型集合，返回的是元组。`T` 自然就是函数了使用示例： ```ts declare function f1(arg: { a: number; b: string }): void; // 没有参数的函数 type T1 = Parameters<() => string>; // type T1 = [] // 一个参数的函数 type T2 = Parameters<(s: string) => void>; // type T2 = [s: string] // 泛型参数的函数 type T3 = Parameters<(arg: T) => T>; // type T3 = [arg: unknown] // typeof f1 结果为 (arg: { a: number; b: string }) => void type T4 = Parameters; // type T4 = [arg: { // a: number; // b: string; // }] // any 和 never type T5 = Parameters; // type T5 = unknown[] type T6 = Parameters; // type T6 = never // 下面这样传参是会报错的 type T7 = Parameters; type T8 = Parameters; ``` ```ts // 源码定义 type Parameters any> = T extends (...args: infer P) => any ? P : never ``` 可以看到限制了函数类型，然后 `...args` 取参数和 `js` 中的用法是一样的，`infer` 表示待推断的类型变量，打断出 `...args` 取到的类型赋值给 `P` ### ReturnType `ReturnType`：作用是获取函数返回值的类型。`T` 为函数示例： ```ts declare function f1(): { a: number; b: string }; type T1 = ReturnType<() => string>; // type T1 = string type T2 = ReturnType<(s: string) => void>; // type T2 = void type T3 = ReturnType<() => T>; // type T3 = unknown type T4 = ReturnType<() => T>; // type T4 = number[] type T5 = ReturnType; // type T5 = { // a: number; // b: string; // } // any 和 never type T6 = ReturnType; // type T6 = any type T7 = ReturnType; // type T7 = never // 下面这样是不行的 type T8 = ReturnType; type T9 = ReturnType; ``` ```ts // 源码定义 type ReturnType any> = T extends (...args: any) => infer R ? R : any ``` 可以看到源码定义上和 `Parameters` 是基本一样的，只是把类型推断的参数换成返回值了 ### ConstructorParameters/InstanceType 我们知道 `Parameters` 和 `ReturnType` 这一对是获取普通/箭头函数的**参数类型集合**以及**返回值类型**的了，还有一对组合`ConstructorParameters` 和 `InstanceType` 是获取**构造函数**的参数类型集合以及**返回值类型**的，和上面的比较类似我就放到一起了 ### Uppercase/Lowercase 这俩儿的作用是转换全部字母大小写 ```ts type T1 = Uppercase<"abcd"> // type T1 = "ABCD" type T2 = Lowercase<"ABCD"> // type T2 = "abcd" ``` ### Capitalize/Uncapitalize 这俩儿的作用是转换首字母大小写 ```ts type T1 = Capitalize<"abcd efg"> // type T1 = "Abcd efg" type T2 = Uncapitalize<"ABCD EFG"> // type T2 = "aBCD EFG" ``` ### 练习四请实现一个类型，把对象类型中的属性名换成大写，需要注意的是对象属性名支持 `string | number | symbol` 三种类型 ```ts type User1 = { name: string age: number 18: number } // 实现如下，只需调用现在的工具类型 Uppercase 就行了 // 先取出所有字符串属性的出来，再处理返回 { NAME: string, AGE: number } // type T1 = { [P in keyof T & string as Uppercase

]: T[P] } // 只处理字符串属性的，其他正常返回 type T1 = { [P in keyof T as P extends string ? Uppercase

: P]: T[P] } type T2 = T1 // type T2 = { // NAME: string; // AGE: number; // 18: number // } ``` ### 综合练习请实现一个类型，可以把下划线属性名的对象，换成驼峰属性名的对象。这个就没有现成的工具类型调用了，所以需要我们额外实现一个这个练习用到了本文中的很多知识，先自己写一下咯 ```ts type User1 = { my_name: string my_age_type: number // 多个下划线 my_children: { my_boy: number my_girl: number } } // 实现如下 type T1 = T extends string ? T extends `${infer A}_${infer B}` ? `${A}${T1>}` // 这里有递归处理单个属性名多个下划线 : T : T; // 对象不递归 // type T2 = { [P in keyof T as T1

]: T[P] } // 对象递归 type T2 = T extends object ? { [P in keyof T as T1

]: T2 } : T type T3 = T2 // type T3 = { // myName: string; // myAgeType: number; // myChildren: { // myBoy: number; // myGirl: number; // }; // } ``` 这个练习用到了 `extends`、`infer`、`as`、`循环`、`递归`，相信能更好地帮助我们理解和运用 ### 参考资料 https://www.typescriptlang.org/docs/handbook/utility-types.html ## 结语如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力 ^_^ 更多前端文章，或者加入前端交流群，欢迎关注公众号【沐华说技术】，大家一起共同交流和进步呀 ***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783 "https://juejin.cn/post/7162096952883019783")***