--- theme: awesome-green highlight: a11y-light --- [5.2W 播放量的 TS 动画版进阶教程合集来了！](https://juejin.cn/post/7095547569777934367)，通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！ > **[不想看文字，那就直接来看视频吧](https://www.bilibili.com/video/BV1HR4y1N7ea/)**：https://www.bilibili.com/video/BV1HR4y1N7ea/ 你用过 Exclude、Extract、NonNullable、Parameters 和 ReturnType 这些工具类型吗？ ```typescript type Exclude = T extends U ? never : T; type Extract = T extends U ? T : never; type NonNullable = T extends null | undefined ? never : T; type Parameters any> = T extends (...args: infer P) => any ? P : never; type ReturnType any> = T extends (...args: any) => infer R ? R : any; ``` 你知道它们内部是如何工作的吗？ ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18becb1cec4f4d63a8ac836a2f093f7a~tplv-k3u1fbpfcp-watermark.image?) 如果你想彻底掌握它们且实现自己的工具类型，那么本文千万不要错过。前面看到的那些内置工具类型，它们内部使用了 TypeScript 2.8 版本引入的条件类型（Conditional Types）。该类型的语法如下： ``` T extends U ? X : Y ``` 其中 T、U、X 和 Y 这些都是类型占位符。你可以这样理解该语法，当类型 T 可以赋值给类型 U 时，那么返回类型 X，否则返回类型 Y。看到这里你是不是也想到了 JavaScript 中的三元表达式。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31c4ef5f3a864df4967d552fa22d06d5~tplv-k3u1fbpfcp-watermark.image?) 那么条件类型有什么用呢？这里我们来举个例子： ```typescript type IsString = T extends string ? true : false; type I0 = IsString; // false type I1 = IsString<"abc">; // true type I2 = IsString; // boolean type I3 = IsString; // never ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c121684a93604a3290ee25bd257c1eb8~tplv-k3u1fbpfcp-watermark.image?) 在以上代码中，我们定义了 IsString 工具类型。使用该工具类型，我们可以判断传给类型参数 T 的实际类型是否为字符串类型。除了判断单一类型之外，利用条件类型和条件链，我们还可以同时判断多种类型。接下来，我们来看一下如何实现该功能： ```typescript type TypeName = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object"; type T0 = TypeName; // "string" type T1 = TypeName<"a">; // "string" type T2 = TypeName; // "boolean" type T3 = TypeName<() => void>; // "function" type T4 = TypeName; // "object" ``` 在以上代码中，我们定义了一个新的 TypeName 工具类型，在该工具类型中，我们使用了条件链。为了便于大家理解条件链，我们以 JavaScript 三元表达式为例，来演示一下它的作用。 ```typescript function example(…) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } // 等价于 function example(…) { if (condition1) { return value1; } else if (condition2) { return value2; } else if (condition3) { return value3; } else { return value4; } } ``` 现在问题来了，对于前面定义的 TypeName 工具类型来说，如果传入的类型是联合类型的话，那么将返回什么结果？下面我们来验证一下： ```typescript type T10 = TypeName void)>; // "string" | "function" type T11 = TypeName; // "string" | "object" | "undefined" ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96ce7f75210f42aea55f3cd2a4266c71~tplv-k3u1fbpfcp-watermark.image?) 为什么 T10 和 T11 类型返回的是联合类型呢？这是因为 TypeName 属于分布式条件类型。在条件类型中，如果被检查的类型是一个 “裸” 类型参数，即没有被数组、元组或 Promise 等包装过，则该条件类型被称为分布式条件类型。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0377755c894548e6b03c9b5ed42b1acb~tplv-k3u1fbpfcp-watermark.image?) 对于分布式条件类型来说，当传入的被检查类型是联合类型的话，在运算过程中会被分解成多个分支。 ```typescript T extends U ? X : Y T => A | B | C A | B | C extends U ? X : Y => (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y) ``` ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dd1ef3fea6f464992e875c18d6d03e6~tplv-k3u1fbpfcp-watermark.image?) 为了便于大家理解，我们来举个例子： ```typescript type Naked = T extends boolean ? "Y" : "N"; type WrappedTuple = [T] extends [boolean] ? "Y" : "N"; type WrappedArray = T[] extends boolean[] ? "Y" : "N"; type WrappedPromise = Promise extends Promise ? "Y" : "N"; type T0 = Naked; // "N" | "Y" type T1 = WrappedTuple; // "N" type T2 = WrappedArray; // "N" type T3 = WrappedPromise; // "N" ``` 由以上结果可知，如果条件类型中的类型参数 T 被包装过，该条件类型就不属于分布式条件类型，所以在运算过程中就不会被分解成多个分支。了解完条件类型和分布式条件类型的知识点，我们来举例演示一下 TypeScript 内置工具类型 Exclude 的执行流程。 ```typescript type Exclude = T extends U ? never : T; type T4 = Exclude<"a" | "b" | "c", "a" | "b"> ("a" extends "a" | "b" ? never : "a") // => never | ("b" extends "a" | "b" ? never : "b") // => never | ("c" extends "a" | "b" ? never : "c") // => "c" never | never | "c" // => "c" ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/281bb2aff49f4194b7a263e58050b169~tplv-k3u1fbpfcp-watermark.image?) 掌握了条件类型之后，再结合往期文章中介绍的[映射类型](https://juejin.cn/post/7089943758543781896)，我们就可以实现一些有用的工具类型。比如实现 FunctionProperties 和 NonFunctionProperties 等工具类型。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9091804aa8fb4f308e2149d01d0e3f6d~tplv-k3u1fbpfcp-watermark.image?) ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ceace0ab244401b4e9a6afcf9e4906~tplv-k3u1fbpfcp-watermark.image?) ```typescript type FunctionPropertyNames = { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]; type FunctionProperties = Pick>; type NonFunctionPropertyNames = { [K in keyof T]: T[K] extends Function ? never : K; }[keyof T]; type NonFunctionProperties = Pick>; interface User { id: number; name: string; age: number; updateName(newName: string): void; } type T5 = FunctionPropertyNames; // "updateName" type T6 = FunctionProperties; // { updateName: (newName: string) => void; } type T7 = NonFunctionPropertyNames; // "id" | "name" | "age" type T8 = NonFunctionProperties; // { id: number; name: string; age: number; } ``` 在以上代码中，利用上述的工具类型，我们就可以轻松地提取 User 对象类型中函数类型和非函数类型的属性及相关的对象类型。阅读完本文之后，相信你已经了解条件类型和分布式条件类型的作用了，也知道 TS 内部一些工具类型是如何实现的。关于在条件类型中如何利用 infer 实现类型推断，阿宝哥将在后续的文章中介绍。你喜欢以这种形式学 TS 么？喜欢的话，记得点赞与收藏哟。