--- theme: yu highlight: a11y-dark --- ## 遥远的面试 - 面试官：“用过 TypeScript 吗？” - 我：“用过！”（我的内心：来吧，该背的知识点我都已经背过了，什么枚举和常量枚举的区别，`interface` 和 `type` 区别，`never` 和 `void` 的区别，什么是逆变，什么是协变……） - 面试官：“那你写一个 `Pick` 和 `Omit` 吧” - 我：![35_b5690dc57d27793663b5904e8ea2933a.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4b3c339e34947ceb1ece2d9d62bce4e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=189&h=189&s=10663&e=jpg&b=ed8970) `Pick` 和 `Omit` 作为 TypeScript 中的内置的工具类型，用倒是用过很多，但是实现嘛……确实需要学习下。 ## Pick `Pick` 是 TypeScript 中的一个内置的工具类型，它可以实现从一个已有的类型中挑选出一部分属性，生成一个新的子类型。举个例子： ```ts // Person 类型，包含三个属性 type Person = { name: string; age: number; address: string; }; // 使用 Pick 来从 Person 中挑选出 name 和 age 两个属性 type PartialPerson = Pick; // 生成只包含 `name` 和 `age` 两个属性的新类型 // 等价于： // type PartialPerson = { // name: string; // age: number; // }; ``` 接下来看一下 `Pick` 的实现： ```ts type Pick = { [P in K]: T[P]; }; ``` 这段代码是 TypeScript 中 `Pick` 类型的定义，我们来逐一拆解一下这段代码中包含的语法知识点： ### 泛型泛型可以让我们把类型当做一个变量，通过 `<>` 传入，这段代码传入 `T` 和 `K` 两个类型变量，泛型可以让我们的类型定义更具有通用性。假设我们有一个 identity 函数，这个函数会返回任何传入它的值。我们可以给类型一个具体的定义比如 `number` 或 `any`，如下： ```ts function identity(arg: number): number { return arg; } function identity(arg: any): any { return arg; } ``` 但是前者会缩小函数的适用范围，后者又会丢失一些信息，此时我们就需要泛型出场了。 ```ts function identity(arg: T): T { return arg; } ``` 我们定义了一个类型变量 `T`，`T`帮助我们捕获用户传入的类型（比如：`number`），之后我们就可以使用这个类型。之后我们再次使用了 `T` 当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。有了泛型，我们可以定义泛型函数，泛型接口，泛型类，我们可以在使用时，通过 `<>` 传入类型参数，也可以让 TS 去推测类型。 ```ts // 泛型函数 function identity(arg: T): T { return arg; } // 传入类型参数 let output = identity("myString"); // 利用了类型推论，让编译器根据传入的参数自动地帮助我们确定 T 的类型 let output = identity("myString"); // 泛型接口 interface GenericIdentityFn { (arg: T): T; } let myIdentity: GenericIdentityFn = identity; // 泛型类 class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; } let myGenericNumber = new GenericNumber(); ``` ### 泛型约束我们把类型当做变量传入，却没有给它加任何限制，而有时候，我们只想对一组类型进行操作，在下面 `loggingIdentity` 的例子中，我们想访问 `arg` 的 `length` 属性，但是编译器并不能证明每种类型都有`length`属性，所以就报错了。 ```ts function loggingIdentity(arg: T): T { console.log(arg.length); // Error: T 没有 length 属性 return arg; } ``` 我们需要限制传入的类型必须有 `length` 属性，此时可以使用 `extends` 来实现对泛型的约束。 ```ts interface Lengthwise { length: number; } function loggingIdentity(arg: T): T { console.log(arg.length); // 现在我们可以确定 T 有 length 属性了 return arg; } ``` 这里的 `extends` 为泛型约束的关键字，表示 `T` 必须符合 `Lengthwise` 接口。 ### keyof `keyof` 运算符接收一个对象类型，并产生其键的字符串或数字字面联合。 ```ts type Point = { x: number; y: number }; type P = keyof Point; // type P = "x" | "y" type Arrayish = { [n: number]: unknown }; type A = keyof Arrayish; // number type Mapish = { [k: string]: boolean }; type M = keyof Mapish; // string | number ``` 在最后的示例中，`M` 是 `string | number`，因为 JavaScript 对象键会被强制转为字符串，所以 `obj[0]` 等同于 `obj["0"]`。到此，我们可以理解 `type Pick` 这行代码：我们定义一个类型 `Pick` 并传入了，`T,K` 两个泛型，其中 `K` 被约束为 `T` 的键值的联合类型。比如，`T`为 `{a:xx,b:xx}`，那么 `K` 只能为 `a` 或 `b` 或 `a|b`。 ### 索引类型和索引类型查询类似于在 JavaScript 中，通过下标或字符串来访问对象的元素或属性，在 TypeScript 中，我们也可以通过下标或属性名，来访问对应元素或属性的类型。 ```ts type Arr = [number, string] type Obj = { name: string age: number } type A = Arr[0] // number type O = Obj['name'] // string ``` 在 `[P in K]` 中，我们通过 `in` 来遍历联合类型，在此处，`P` 是一个临时变量，代表 `K` 中的每一个成员。`K` 是一个联合类型，表示一个类型的集合。所以 `P in K` 就表示遍历 `K` 中的每一个类型。 `T[P]` 这是一个索引访问类型，表示访问 `T` 中 `P` 属性的类型。我们知道，在有了 `K extends keyof T` 的限制后，此处的 `P` 必是 `T` 的属性名，所以 `T[P]` 就表示 `T` 中 `P` 属性的类型。 ### 总结所以，整个 `Pick` 类型的含义是：指定 `T` 中的一些属性名集合 `K`，取出 `T` 中所有 `K` 包含的属性名和它在 `T` 中对应的类型，来组成一个新的类型。 ## Omit `Omit` 也是 TypeScript 内置的工具类型，和 `Pick` 相反，`Omit` 用于从一个已有的类型中删除某些属性，来生成一个新的属性。定义： ```ts type MyOmit = ... ``` 实现 `Omit` 最简单的思路，我们从 `Pick` 出发，既然 `Omit` 是删除指定属性，那我们也可以反向 `Pick` 不被删除的属性。这样问题就变成了，如何获取 `T` 中不在 `K` 中的属性集合，刚好 TypeScript 内置的 Exclude 可以帮我们实现。 ### Exclude `Exclude` 是 TypeScript 中的一个内置工具类型，用于从一个联合类型 `T` 中把符合 `U` 的成员删除，生成一个新的类型。举个例子： ```ts type Result = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c' type Result = Exclude<'a' | 'b' | 'c', 'a' | 'b'>; // 'c' ``` 我们来看下 `Exclude` 的实现： ```ts type MyExclude = T extends U ? never : T; ``` `Exclude` 的实现很简单，但是这里面涉及一个的知识点：条件类型。 ### 条件类型在 TypeScript 中，条件类型是一种动态决定类型的方式。它的基本形式是 `T extends U ? X : Y`，表示如果类型 `T` 可以赋值给类型 `U`，那么结果类型就是 `X`，否则结果类型就是 `Y`。例如，我们可以定义一个 `IfString` 类型，如果给定的类型是 `string`，那么结果类型就是 `'yes'`，否则结果类型就是 `'no'`： ```typescript type IfString = T extends string ? 'yes' : 'no'; ``` 然后我们可以像下面这样使用这个条件类型： ```typescript type T1 = IfString; // 'yes' type T2 = IfString; // 'no' ``` 在这个例子中，`T1` 是 `'yes'`，因为 `string` 可以赋值给 `string`；`T2` 是 `'no'`，因为 `number` 不能赋值给 `string`。 ### 分布式条件类型分布式条件类型是条件类型的一个特性：当条件类型遇到联合类型时，会被应用到联合类型的每一个成员上，这就是所谓的“分布式”行为。例如，假设我们有一个条件类型 `T extends U ? X : Y`，如果 `T` 是一个联合类型 `A | B | C`，那么这个条件类型就会被展开为 ```ts (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y) ``` ### 实现1: Pick & Exclude 现在我们可以轻松实现 `Omit`： ```ts type MyOmit = Pick> ``` ### 实现2: 不使用 Pick 当然，我们也可以不用 `Pick`，既然我们已经可以了解了 `Pick` 的实现原理。 ```ts type MyOmit = { [P in Exclude]: T[P]; } ``` ### 实现3: 抛弃 Pick 和 Exclude 理所当然的，我们学会了 `Pick` 和 `Exclude` 的实现方式，理论上我们就可以不使用他们来实现了。但是如何把 `Exclude` 的实现加入到**实现2**中，还是有点难度，我一开始尝试这种实现方式： ```ts type MyOmit = { [P in keyof T]: P extends K ? never : T[P]; } ``` 但是这样是不正确的，事实上这种实现方式并没有删除 `K` 中指定的属性，而是把类型改为了 `never`。显然，我们需要在属性键类型上做一些操作，而不是属性值类型。我们尝试这样实现，但是会遇到语法错误，TypeScript 不允许在映射类型的键迭代部分直接使用条件类型。 ```ts type MyOmit = { [P in keyof T extends K ? never : P]: T[P]; }; ``` 我们来直接看一下正确的实现方式： ```ts type MyOmit = { [P in keyof T as P extends K ? never : P]: T[P]; }; ``` 这里又涉及到一个新的语法，`as` 在映射类型中用于重映射键名。 ### as 在 TypeScript 中，`as` 一般用于类型断言，比如： ```ts toast((error as { msg: string })?.msg); ``` 在 TypeScript 4.1 及更高版本中，`as` 关键字还可用于映射类型，以重新映射键名，这样就可以在创建新类型时更改键名。比如： ```ts type PrefixWithUnderscore = { [K in keyof T as `_${string & K}`]: T[K]; }; type Original = { id: number; name: string; }; type Prefixed = PrefixWithUnderscore; // 等同于 { _id: number; _name: string; } ``` 回到我们的 `Omit` ```ts type MyOmit = { [P in keyof T as P extends K ? never : P]: T[P]; }; ``` 我们利用了 `as` 来对每一个属性键 `P` 来进行条件判断：如果属性键 `P` 属于类型 `K`，则结果类型为 `never`，这样该属性就不会被包含在最终类型中，而如果 `P` 不属于 `K`，则保持属性键 `P` 不变。这样我们就完成了不依赖任何内置类型工具实现 `Omit`。 ## 参考 - [泛型·TypeScript](https://www.tslang.cn/docs/handbook/generics.html) - [索引签名](https://jkchao.github.io/typescript-book-chinese/typings/indexSignatures.html#typescript-%E7%B4%A2%E5%BC%95%E7%AD%BE%E5%90%8D) - https://stackoverflow.com/questions/55781559/what-does-the-as-keyword-do