--- highlight: an-old-hope theme: vue-pro --- ## 前言 ### 探索经历 **我不知道我不知道** 我曾经以为 `Tyepscript` 只是在 `Javascript` 基础上加一些类型注释，是 JavaScript 的增强版而已，属于有手就会。 **我知道我不知道** 直到我用到了 `Prisma` 这个 NodeJS ORM 工具，其生成的类型定义，可以根据你的参数，完美应对关联查询、部分查询等各种场景，完全吊打其他 NodeJS ORM。出于好奇，我看了以下源码： ![snipshot.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53b4531da8a340daacad1155b92d824d~tplv-k3u1fbpfcp-watermark.image?) 这还是我认识的 `Typescript` 吗？？？ **我只知道我知道的** 后面浏览 [Github Trending](https://github.com/trending) 时发现了 [type-challenges](https://github.com/type-challenges/type-challenges) 这个项目（俗称类型体操）。 ![微信截图_20220806230248.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7fadfdf7afb4eb889bdc9132c1307c5~tplv-k3u1fbpfcp-watermark.image?) 然后就开始了我的 TS 编程挑战，但在刷的过程中，我发现已经做过的，似乎感觉会了，但到下一题还是写不出来，甚至过几天重刷还会忘记怎么写。 ![154390DB.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32f7d0faad0041068aa748c75c00cb75~tplv-k3u1fbpfcp-watermark.image?) **我不知道我知道的** 然后我停止刷题，开始思考他们到底有什么规律，我似乎顿悟了： **TS 类型本身就是一个很复杂的、独立的语言，不仅仅是 JS 的增强和类型注释。** 然后我就尝试着从语言的层面理解 TS 类型，瞬间豁然开朗，仿佛进入了桃花源，那些类型挑战不过是这些基础知识的应用而已，再也不用死记硬背。 ![0070XTeOgy1gtv57eag5fj606l05y0sq02.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84e096a3b0924eac83b9e95e41f07289~tplv-k3u1fbpfcp-watermark.image?) ### 学习建议 - 要有一定的 TS 基础，起码有一两个项目用过 TS； - 先去刷 [type-challenges](https://github.com/type-challenges/type-challenges)，接受毒打，然后自己总结，然后再看本文，本文每节知识后面都对应着能解决挑战，在拿着知识的冲锋枪去挑战它； - 学习本文时，一定要打开宇宙第一的 VSCode，创建一个 TS 文件，将示例代码拷贝进去看看效果 - 如果还没做完以上准备，可以先收藏一下本文，毕竟收藏了就是学会了。 ### 学习目标 - 能够深入理解 TS 类型编程的相关知识 - 能挑战完大部分 type-challenges 题 - 能理解开源项目中的 Typescript 定义 ## 大纲前面我们说了 TS 类型自己就是一门复杂、独立的语言，那么从我们语言的角度设计这门指南： - 类型变量定义 - 类型数据和值 - 类型的父子关系 - 循环语句 - 递归语句 - 字符串操作 - 对象操作 - 元组操作 - 条件语句 ## 手册指南 ### 类型变量定义类型变量的方式有三种，分别为 `type`、`interface`、`enum`，他们都相当于 JS 中的 `const`，**一旦定义就不可改变**，三者的区别是： - `enum`：仅用来定义枚举类型； - `interface`：可以用来定义函数、对象、类； - `type`：使用绝大多数类型，例如普通的值、对象、函数、数组、元组等。例如： ```ts /** type 方式定义 */ type A = string; // 普通类型 type B = number[]; // 数组 type C = (num: number) => number; // 函数 type D = { age: number; name: string }; // 对象 /** enum */ enum Color { GREEN, RED, BLUE } /** interface 定义 */ interface Sum { // 函数（没必要这样定义，除非你的函数有其他属性） (num1: number, num2: number): number; } const getSum: Sum = (a: number, b: number) => a + b interface Person { // 对象 name: string; age: number; } ``` ### 类型数据和值在官方文档中第一篇就介绍了 TS 的基础类型包括了： - 布尔：`boolean` - 数字：`number` - 字符串：`string` - 数组：`number[]` / `Array` - 元组：`[number, string]` - 枚举：`enum Color{ RED, GREEN, BLUE }` - `any` - `void` - `null`、`undefined` - `never` - `object` 但是这里要问一下大家，除了这些难道就没有其他的值了吗？？？大家请看下面的例子： ```ts type A = 1; const a: A = 1; //完全正确 type B = { name: 'zhang', age: 18 }; const b: B = { name: 'zhang', age: 18 }; // 毫无报错 type C = [1, number, 2, string]; const c: C = [1, 111, 2, "hello"]; // 没任何毛病 type S = `num - ${A}`; // 'num - 1' 可以使用字符串模板，简直离谱 ``` 从上面的例子大家也可以得出一个结论： **JS 中合法的值，在 TS 类型中同样合法，也就是 *TS 类型的值 = TS 基础类型 + JS 值*，并且可以混用。** ### 类型的父子关系类型是有父子关系的，子类型的值可以赋值给父类型，但是父类型的值是不能够赋值给子类型的。例如： ```ts type ParentType = 1 | 2 | string type SubType = 1 let parentData: ParentType = 2; let subData: SubType = 1; subData = parentData; // ❌ 父类型不能赋值给子类型的值 parentData = subData; // 🆗 ``` 这一特性对于后面要讲的泛型和条件判断有着至关重要的作用，我们先简单看一下类型中的条件语句： ```ts type IsSub = SubType extends ParentType ? true : false; // IsSub 的类型值为 true ``` 了解了父子类型的基本概念后，我们还需要掌握在 *类型数据和值* 中提到的各种 TS 类型之间的父子关系，为后面学习泛型、条件、递归等打下基础。 **1、具体值是基础类型的子类型** - `1` 是 `number` 的子类型 - `true` 是 `boolean` 的子类型 ```ts const a: 1 = 1; const b: number = a; // ok const c: true = true; const d: boolean = c; // ok ``` **2、联合类型中的部分是整体的子类型** - `1 | 2` 是 `1 | 2 | 3` 的父类型 **3、`never` 类型是所有类型的子类型** ```ts function foo(): never { throw new Error() } const a: 1 = foo(); // 可以赋值，类型不会报错就证明了 never 类型是 1 的子类型 ``` **4、对象判断子类型，需要逐个属性比较** ```ts type ButtonProps = { size: 'mini' | 'large', type: 'primary' | 'default' } type MyButtonProps = { size: 'mini', type: 'primary' | 'default', color: 'red' | 'blue' } type IsSubButton = MyButton extends Button ? true : false; // true ``` 在进行比较时，首先 `MyButtonProps` 的 `size` 和 `type` 都是 `ButtonProps` 中对应属性的子类型，虽然 `MyButtonProps` 比 `ButtonProps` 多了个 `size` ，但其不参与比较。 **5、`undefined` 在 tsconfig `strictNullChecks` 为 true 的情况下是 `void` 和 `any` 类型子类型，为 false 的情况下则除 `never` 的子类型** ```ts // strictNullChecks 为 true（默认行为） let a: undefined; let b: number = 1; let c: void; let d: any = 'jack' b = a; // ❌ undefined 不是其他类型子类型 c = a; // 🆗 undefined 是 void 类型子类型 d = a; // 🆗 undefined 是 any 类型子类型 ``` ```ts // strictNullChecks 为 false let a: undefined; let b: number = 1; let c: void; b = a; // 🆗 undefined 是其他类型子类型 c = a; // 🆗 undefined 是 void 类型子类型 d = a; // 🆗 undefined 是 any 类型子类型 ``` **6、`undefined` 在 tsconfig `strictNullChecks` 为 true 的情况下是 `any` 类型子类型，为 false 的情况下则除 `never` 的子类型** #### 父子关系与联合类型当子类型与父类型组成联合类型时，实际效果等于父类型。例如： ```ts type A = number | 1; // number type B = never | string; // string （never 前面说了是所有类型的子类型） ``` ### 变量取属性我们知道在 JS 中对象是可以通过 `.` 操作符，而在 TS 类型中，也能进行相似的操作。例如： ```ts // 普通对象 interface Person { name: string; age: number; } type Name = Person['name']; // string // enum 枚举 enum Color { Red, Green, Blue } type Red = Color.Red; // 0 // 数组（数组是没法获取 length 属性的，因为有多少项是不固定的） type Names = string[]; type FirstName = Names[0]; // string type Len = Names['length']; // ❌ // 元组（元组是可以获取 length 属性的，因为其长度是固定的） type Language = ['js', 'java', 'python', 'rust']; type Rust = Language[3]; // rust type Len = Language['length']; // 🆗 // 字符串 type Str = 'hello'; type S = Str[0]; // ⚠️ 注意是 string，不是 h type StrLen = Str['length'] // number 而非具体的数字 ``` **⚠️ 注意，基础类型是可以取到原型的定义的，所以并非无属性。** ```ts // 字符串原型方法 type Concat = 'h'['concat']; // String.prototype.concat 的类型定义 // 数字原型方法 type N = 1; type ToFixed = 1['toFixed'] // Number.prototype.toFixed 的类型定义 ``` #### 获取类型所有属性 key 想要知道对象有哪些属性，可以使用 `keyof` 关键词。例如： ```ts interface Person { name: string; age: number; } type Keys = keyof Person; // 返回属性的联合联合类型 ``` ⚠️**箭头函数类型和空对象**没有 key。例如: ```ts type F = () => void; type K = keyof F; // never; type Foo = keyof {}; // never; ``` ### 条件语句 TS 类型编程中并没有其他语言中的 `if/else` 语法，而是使用了三元运算符 `X extends Y ? expr1 : expr2`。 - X extends Y − 判断 X 是否为 Y 的子类型 - expr1 − 如果 X 是 Y 的子类型，则返回该值 - expr2 − 如果 X 不是 Y 的子类型，则返回该值 ```ts type A = 1 extends number ? 1 : never; // 1 type IsRed = 'blue' extends 'red' ? true : false; // false ``` ### 类型中的函数（泛型） #### 泛型基础和定义 TS 泛型就像 JS 的函数一样，可以根据输出的类型，决定返回的类型。我们看一个简单的例子： ```ts // JS 函数 function foo(arg) { return arg; } // TS 泛型 type Foo = T; ``` 在 `foo` 函数作用是，你给他什么值，它就返回什么值；`Foo` 泛型则是你给他什么类型，它返回什么类型。除了上面的定义方式，还可以使用 `interface` 定义。例如： ```ts interface FormData { name: string; data: T; } ``` #### 泛型约束我们写 JS 函数的时候，为了代码的健壮性，通常会对输入参数进行校验，泛型中通过 `extends` 关键字也实现了类似的功能。例如： ```ts class Person { name: string; } function getName(user) { if (!(user instanceof Person)) { throw new Error(`${user} is not instanceof "Person"`); } return user.name; } type GetName = U['name']; ``` #### 泛型参数默认值我们知道 ES6 后函数支持参数默认值，同样的，在 TS 类型编程中，泛型也有默认值的能力。例如： ```ts // js 函数参数默认值 function getSum(a = 0, b = 0) { return a + b; } const sum = getSum(); // 0 // TS 泛型默认值 type UnionType = T | U; type MyType = UnionType; // string | number ``` #### 泛型与条件判断上面的示例中，我们只列举了简单的场景，当配合条件语句的时候，泛型的灵活性就更大了。例如： ```ts type IsBoolean = T extends boolean ? true : false; type A = IsBoolean; // true type B = IsBoolean<1>; // false; ``` ```ts // 嵌套条件语句 type Upper = T extends 'a' ? 'A' : ( T extends 'b' ? 'B' : T // 嵌套了另一个条件语句 ); type B = Upper<'b'>; // "B"; ``` 学完本小节，你可以试着挑战： - [00268-easy-if](https://github.com/type-challenges/type-challenges/blob/main/questions/00268-easy-if/README.zh-CN.md) #### 泛型与条件与类型推断变量如果以上介绍的内容对你来说虽然既陌生又熟悉，接下来我们引入的一个关键词你可能从未听过，即 `infer`。 `infer` 可以在 `X extends Y ? expr1 : expr2` 的 `Y` 中使用类型变量，并且这个类型变量，可以在后续的 `expr1` 中使用。例如我们需要得到函数的返回值的类型可以如下操作： ```ts type ReturnType = T extends ((...args: any) => infer R) ? R : never; type GetSum = (a: number, b: number) => number; type A = ReturnType // number; ``` 其中 `R` 既类型推断变量。 > `extends` 是一个大忙人： > - 在 JS 中，担当类的继承重担，例如 `App extends Component` > - 在 TS 类型中，当泛型约束，例如 `type ToUpper = xxx` > - 在 TS 类型中，条件判断的关键词 `type ReturnType = T extends () => infer R ? R : never`' 学完本小节，你能完成的挑战： - [00189-easy-awaited](https://github.com/type-challenges/type-challenges/blob/main/questions/00189-easy-awaited/README.zh-CN.md) - [03312-easy-parameters](https://github.com/type-challenges/type-challenges/blob/main/questions/03312-easy-parameters/README.zh-CN.md) - [00002-medium-return-type](https://github.com/type-challenges/type-challenges/blob/main/questions/00002-medium-return-type/README.zh-CN.md) #### 内置泛型工具 Typescript 给我们内置了一些极其有用的泛型工具，我们本小节挑一些简单说明： ```ts type Person = { name: string; age: number; id: number; } // Pick 挑选出指定属性，生成新对象类型 type UserInfo = Pick; // 挑选出 { name: string; age: number } // Omit 排除指定的属性，生成新的对象类型 type UserInfo2 = Omit; // 排除 id，生成 { name: string; age: number } // Partial 将对象所有属性变为可选 type PartialPerson = Partial; // { name?: string; age?: number; id?: number } // Readonly 将对象所有属性变为只读 type ReadonlyPerson = Readonly; // { readonly name: string; readonly age: number; readonly id: number } // Record 生成对象类型，例如 type PersonMap = Record; // { [index: number]: Person } // Exclude 排除一些联合类型 type UserInfoKeys = Exclude; // 'name' | 'age' ``` ### 对象类型的操作 #### 属性修饰对象的属性是可以有修饰符的，目前有两种修饰符，分别是 `readonly` 关键字对应的可选属性和 `?:` 对应的可选属性。例如： ```ts type Person = { name: string; age?: number; // 1、可选属性 readonly id: number; // 2、只读属性 } const person: Person = { name: '张三', id: 1, // 没有 age 属性，不报错，说明 age 可选 } person.id = 2; // 报错，不能修改只读属性 person.age = 18; // 正常 ``` #### 属性修饰与父子关系父子类型主要讨论属性的存在与否，所以： - 可选类型会导致父子关系的出现，因为可选类型相当于 `自身 | undefined`，其是必填类型 `自身` 的父类型 - readonly 则不会导致对象之间存在父子关系 ```ts type A = { name: string }; type B = { name?: string }; let a: A = { name: 'a' }; let b: B = { }; a = b; // ❌ B 类型中 name 是 `string |undefined`, 是 A 类型中 `string` 的父类型，所以不能赋值 b = a; // OK，string 可以赋值给 `string |undefined` ``` ```ts type A = { name: string }; type B = { readonly name: string }; let a: A = { name: 'a' }; let b: B = { name: 'b' }; a = b; // OK b = a; // OK a.name = 'abc'; // OK，a 的类型还是 A，所以可以修改 ``` #### 对象类型的遍历我们知道在 JS 中可以使用 `for/in` 遍历对象的属性，在 TS 类型编程中也有类似的方式，不过更加简洁。例如我们把所有的属性都加上 `readonly` 修饰符： ```ts // js 对象遍历 const person = { name: '张三', age: 18, id: 1, } for (const key in person) { console.log(key, person[key]); } // ts 类型对象遍历 type Person = { name: string; age?: number; readonly id: number; } type Readonly = { readonly [Key in keyof T]: T[Key]; } ``` 上述示例中有以下几点： - `keyof` 关键字可以获取到对象所有的属性（前面讲过） - `Key` 就是每次遍历时存的属性名 - `T[Key]` 就是每次遍历时存的属性值 - 然后我们在每个属性前面加上了 `readonly` 这样所有的属性都是只读的了。学完本小结，你可以试着挑战： - [00004-easy-pick](https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.zh-CN.md) - [00007-easy-readonly](https://github.com/type-challenges/type-challenges/blob/main/questions/00007-easy-readonly/README.zh-CN.md) - [00003-medium-omit](https://github.com/type-challenges/type-challenges/blob/main/questions/00003-medium-omit/README.zh-CN.md) - [00008-medium-readonly-2](https://github.com/type-challenges/type-challenges/blob/main/questions/00008-medium-readonly-2/README.zh-CN.md) - [00009-medium-deep-readonly](https://github.com/type-challenges/type-challenges/blob/main/questions/00009-medium-deep-readonly/README.zh-CN.md) ### 元组类型的操作 #### 只读修饰符 & 父子关系在元组中也可以像对象那样在元组前面加上 `readonly` 代表元组的每一项都是只读的。例如： ```ts type Arr = readonly [1, number]; const a: Arr = [1, 2]; a[0] = 3; // Error: readonly ``` 如果两个类型*元素完全相同* 的前提下，只读的和非只读是有父子关系的：非只读是只读的子类型。具体没查到原因，不过可以理解自我催眠为 `readonly` 表示的更信息更多。 ```ts type A = readonly [1, 2, 3]; type B = [1, 2, 3]; let a: A = [1, 2, 3]; let b: B = [1, 2, 3]; a = b; // 非只读可以赋值给只读的 b = a; // ❌ 只读的元组不能赋值给非只读的 ``` 学完本节你可以搞定： - 00018-easy-tuple-length #### 元组的解构元组的解构和 JS 数组的解构十分相似。假设我们需要将两个元组类型合并成一个，我们可以如下操作： ```ts // JS 合并两个数组 function concat(arr1, arr2) { return [...arr1, ...arr2); } const arr = concat([1], [2, 3]); // [1,2,3] // TS 合并两个元组 type Concat = [...T, ...U]; type Result = Concat<[1], [2, 3]> // [1, 2, 3] ``` readonly 的元组转为非 readonly，我们可以使用解构完成。例如： ```ts type A = readonly [number, string]; type B = [...A]; // 变成了非 readonly 了 const b: B = [1, 'a'] b[0] = 2; ``` 因为 readonly 是针对整个元组而言的，所以通过解构，我们就将每个元素取出来了，重新赋值给另一个类型变量就解决这个问题了。学完本节，你可以完成如下挑战： - [00014-easy-first](https://github.com/type-challenges/type-challenges/blob/main/questions/00014-easy-first/README.zh-CN.md) - [00533-easy-concat](https://github.com/type-challenges/type-challenges/blob/main/questions/00533-easy-concat/README.zh-CN.md) - [03057-easy-push](https://github.com/type-challenges/type-challenges/blob/main/questions/03057-easy-push/README.zh-CN.md) - [03060-easy-unshift](https://github.com/type-challenges/type-challenges/blob/main/questions/03060-easy-unshift/README.zh-CN.md) - [00015-medium-last](https://github.com/type-challenges/type-challenges/blob/main/questions/00015-medium-last/README.zh-CN.md) - [00016-medium-pop](https://github.com/type-challenges/type-challenges/blob/main/questions/00016-medium-pop/README.zh-CN.md) - [00191-medium-append-argument](https://github.com/type-challenges/type-challenges/blob/main/questions/00191-medium-append-argument/README.zh-CN.md) #### 元组的遍历有些情况下，我们需要对每个元素进行判断和处理，此时就需要使用元组的遍历，元组的遍历有两种方式： - 递归方式 - 对象类型遍历方式 ##### 递归方式遍历我们以 *多维元组拍平为一维元组* 为例，来看看怎么用递归的思想实现。 ```ts // JS 中用递归思想解决数组拍平问题 function flatten(arr) { if (arr.length === 0) return []; const [first, ...rest] = arr; if (Array.isArray(first)) { return [...flatten(first), ...flatten(rest)] } return [first, ...flatten(rest)]; } const a = flatten([1, [[2]]]); // [1, 2] // TS 中用递归思想解决元组拍平问题 type Flatten = T extends [infer First, ...infer Rest] ? (First extends any[] ? [...Flatten, ...Flatten] : [First, ...Flatten]) : []; type a = Flatten<[1, [[2]]]>; // [1,2] ``` 相信能看懂 JS 逻辑的人都能看懂 TS 逻辑，两者几乎一致： - 首先我们先判断是否能够结构为符合要求的元组，如果不能，直接返回空元组。 - 如果能，我们判断元组的第一个元素是否为元组 - 如果是，调用 `Flatten` 继续处理。 - 如果不是，直接放到返回值的第一个元素。 - Rest 就是剩下的元素，调用 `Flatten` 继续处理。最终返回的类型就是通过递归拍平的元组类型了。学完本小结，你可以解决： - [00898-easy-includes](https://github.com/type-challenges/type-challenges/blob/main/questions/00898-easy-includes/README.zh-CN.md) - [00459-medium-flatten](https://github.com/type-challenges/type-challenges/blob/main/questions/00459-medium-flatten/README.zh-CN.md) - [00949-medium-anyof](https://github.com/type-challenges/type-challenges/blob/main/questions/00949-medium-anyof/README.zh-CN.md) ##### 对象类型遍历方式我们再用示例说明如何使用对象类型遍历方式处理元组。 ```ts // JS 示例：希望 [1, () => 2+3, 4] 能够被处理成 [1, 5, 4] function getArrVal(arr) { for(let key in arr) { if (typeof arr[key] === 'function') { arr[key] = arr[key](); } } return arr; } // Ts 示例：希望 [1, () => number, string] 能够被处理成 [1, number, string] // 对象遍历的方式 type GetType = { [K in keyof T]: T[K] extends () => infer R ? R : T[K] } // 递归的处理方式 type GetType = T extends [infer First, ..] ``` 总结： - 两种处理方式都能遍历到每个元素，并对每个元素做一些判断和处理。 - 除了在会增加元素数量（上面的 `Flatten` 示例）的情况下，必须使用递归的模式，其它情况可任选。学完本节，你可以挑战： - [00020-medium-promise-all](https://github.com/type-challenges/type-challenges/blob/main/questions/00020-medium-promise-all/README.zh-CN.md) - [00527-medium-append-to-object](https://github.com/type-challenges/type-challenges/blob/main/questions/00527-medium-append-to-object/README.zh-CN.md) - [00599-medium-merge](https://github.com/type-challenges/type-challenges/blob/main/questions/00599-medium-merge/README.zh-CN.md) #### 元组与索引与联合类型元组其实就是个数有限、类型固定的数组类型。所以前面也讲过，其可以使用数字作为下标来访问的，例如： ```ts type tupleStr = ['a', 'b', 'c']; type A = tupleStr[0]; // 'a' type B = tupleStr[1]; // 'b' ``` 如果这个索引是 `number` 会发生什么呢？ ```ts type tupleStr = ['a', 'b', 'c']; type UnionStr = tupleStr[number]; // 'a' | 'b' | 'c' 变成了联合类型 ``` 因为 `number` 代表了可能是 `0` 也可能是 `1` 或者 `2`，所以这些可能性组成的集合就是联合类型。学完本节你应该可以挑战： - [00011-easy-tuple-to-object](https://github.com/type-challenges/type-challenges/blob/main/questions/00011-easy-tuple-to-object/README.zh-CN.md) - [00010-medium-tuple-to-union](https://github.com/type-challenges/type-challenges/blob/main/questions/00010-medium-tuple-to-union/README.zh-CN.md) ### 字符串操作字符串的相关操作主要体现在两方面： - 字符字符字面量类型的解构 - 字符串字面量类型的遍历 #### 字符串类型推导和解构字符串类型推导和解构，是将一个完整字符串分解为几个部分，然后对各个部分我们可以进行各种处理。这里需要注意的是，在拆分的时候需要注意是否含有字符串字面量作为分割符，有和没有的情况，分割后的变量含义并不相同。 ##### 推导类型中有字符串字面量的情况我们需要实现一个将字符串类型中 `_` 去除的功能，其可以为： ```ts type DelUnderline = T extends `${infer LeftWords}_${infer RightWords}` ? `${LeftWords}${RightWords}` : T; // 测试用例 type HelloWorld = DelUnderline<'hello_world'>; // helloworld（LeftWords 为 hello，RightWords 为 world） type World = DelUnderline<'_world'>; // world（LeftWords 为空字符串，RightWords 为 world） type Hello = DelUnderline<'hello_'>; // hello（LeftWords 为 hello，RightWords 为空字符串） ``` 我们从上面例子可以得到结论：当推断类型中有字符串字面量作为边界时，如上例的 `_`，其解构的左边 `LeftWords` 是左侧所有字符串的代表，右边 `RightWords` 是右侧所有字符串的代表，并且**可以代表空字符串**。学完本节，你可以挑战： - [00106-medium-trimleft](https://github.com/type-challenges/type-challenges/blob/main/questions/00106-medium-trimleft/README.zh-CN.md) - [00108-medium-trim](https://github.com/type-challenges/type-challenges/blob/main/questions/00108-medium-trim/README.zh-CN.md) - [00116-medium-replace](https://github.com/type-challenges/type-challenges/blob/main/questions/00116-medium-replace/README.zh-CN.md) - [00119-medium-replaceall](https://github.com/type-challenges/type-challenges/blob/main/questions/00119-medium-replaceall/README.zh-CN.md) - [00529-medium-absolute](https://github.com/type-challenges/type-challenges/blob/main/questions/00529-medium-absolute/README.zh-CN.md) ##### 推导类型中无字符串字面量的情况假设我们要实现 TS 类型的首字母大写的效果，我们可以这样写： ```ts type MyCapitalize = T extends `${infer First}${infer Rest}` ? `${Uppercase}${Rest}` : T; type A = MyCapitalize<'hello'>; // "Hello"（First 为 "h"，Rest 为 "ello"） type B = MyCapitalize<'b'>; // "B" （First 为 "h"，Rest 为空字符串） type C = MyCapitalize<''>; // 当为空字符串时，会走到 false 的分支，返回空字符串 ``` 我们从上面例子可以得到结论：当推断类型中没有字符串字面量作为边界时，第一个变量作为第一个字符，第二个变量代表剩下的字符，可以为空字符串。当然如果有三个变量，`${A}${B}${C}`，则第一个变量 `A` 代表第一个字符，`B` 代表第二个字符串，`C` 代表剩下的字符。学完本节，你可以挑战： - [00110-medium-capitalize](https://github.com/type-challenges/type-challenges/blob/main/questions/00110-medium-capitalize/README.zh-CN.md) - [00531-medium-string-to-union](https://github.com/type-challenges/type-challenges/blob/main/questions/00531-medium-string-to-union/README.zh-CN.md) ### 字符串字面量类型的遍历字符串字面量类型的遍历，核心是使用递归思想以及上面提到的字符串的解构，这在后面很多转换中都很重要。这里我们使用字符串类型转元组类型小试牛刀： ```ts type StringToTuple = T extends `${infer First}${infer Rest}` ? [First, ...StringToTuple] : [T]; type Foo = StringToTuple<'abc'>; // ["a", "b", "c"] ``` 我们这里分析一下： - 首先我们将 T 拆分为了 `First` 和 `Rest`，其中 `First` 代表第一个字符，`Rest` 代表后面所有的字符； - 当为 `true` 时，我们将 `First` 和 `Rest` 分别放入数组中，并将 `Rest` 进行递归的拆分，且将拆分后的数组使用数组解构，打平成一维数组； - 当为 `false` 时，此时 `T` 为空字符串，我们返回一个空数组，而不应该是空字符串。学完本节，你能够挑战： - [00298-medium-length-of-string](https://github.com/type-challenges/type-challenges/blob/main/questions/00298-medium-length-of-string/README.zh-CN.md) - [00612-medium-kebabcase](https://github.com/type-challenges/type-challenges/blob/main/questions/00612-medium-kebabcase/README.zh-CN.md) - [00645-medium-diff](https://github.com/type-challenges/type-challenges/blob/main/questions/00645-medium-diff/README.zh-CN.md) ### 联合类型的操作 #### 联合类型与泛型推导联合类型代表着几种可能性的集合，它在泛型推导中和其他类型都不一样，你可以把他理解为它在做泛型推到时，并不是一次性判断，而是将每一项单独判读并返回，然后再将这些返回进行联合。说起来有点绕，我们看下面的例子就明白了： ```ts type Foo = T extends 'a' | 'b' ? `${T}1` : T; type Bar = Foo<'a' | 'b' | 'c'> // "a1" | "b1" | "c" ``` 如我们上面说的，例子中并不是将 `'a' | 'b' | 'c'` 一次性判断的，而是： - 先判断 `a` ，走到 true 分支，返回 `"a1"` - 然后判断 `b` ，走到 true 分支，返回 `"b1"` - 最后判断 `c` ，走到 false 分支，返回 `"c"` - 再将 `"a1"`、`"b1"` `"c"` 联合成 `"a1" | "b1" | "c"` 并返回。为了更加清楚的明白，我们再举一个例子： ```ts interface Cat { type: '🐱'; food: string[]; } interface Dog { type: '🐶'; food: string[]; } type Animal = Cat | Dog; type LookUp = U extends { type: T } ? U : never; type A = LookUp // Dog ``` 根据前面说的，它会将联合类型的每个成员拿去比较，最后返回。所以其判断步骤为： - `Cat` 与 `{type: '🐶'}`，会走到 false 分支，返回 `never`； - `Dog` 与 `{type: '🐶'}`，会走到 true 分支，返回 `Dog`； - `Dog | never` 根据前面讲过的联合类型与父子关系，最终返回的就是 `Dog` 学完本小结，你可以解决： - [00043-easy-exclude](https://github.com/type-challenges/type-challenges/blob/main/questions/00043-easy-exclude/README.zh-CN.md) - [00062-medium-type-lookup](https://github.com/type-challenges/type-challenges/blob/main/questions/00062-medium-type-lookup/README.zh-CN.md) - [00296-medium-permutation](https://github.com/type-challenges/type-challenges/blob/main/questions/00296-medium-permutation/README.zh-CN.md) ### 其他 #### 从 JS 值转为 TS 值我们知道 TS 是有类型推导的，即便是一个没定义类型的 JS 变量也是有其类型定义的，此时我们是可以通过 `typeof` 完成从 JS 到 TS 的转化的。例如： ```ts // 定义 JS 变量 const jack = { name: 'jack', age: 18 } // 从 JS 中获取 TS 并赋值 type Person = typeof jack; // 此时 Person 为 { name: string; age: number }; ``` 应用场景：这种情况多用在，我们需要时使用开源库的类型时（比如泛型传参），它又没做类型定义或者没导出的场景，例如 [redux-toolkit 文档示例](https://github.com/reduxjs/redux/blob/d6eeaa26eeae4aec07a5096ee114645e30cd9de7/docs/tutorials/typescript.md#define-root-state-and-dispatch-types)。 #### 更精准的类型推测有人就会好奇，为什么 `name` 会被推导为 `string`，而不是 `"jack"` 呢？默认情况下 TS 对对象或者数组的推导是尽可能宽泛的，想要让其具体，需要使用到 `as const` 语法，让其尽可能精准的推测。例如： ```ts const jack = { name: 'jack', age: 18 } as const; // 会被推导为：{ readonly name: "jack"; readonly age: 18; } const arr = [1, 2] as const; // 会被推导为：readonly [1, 2]; ``` 要注意，每个元素都是 `readonly` 的哦。 ## 总结与回顾经过奋斗，大家终于来到了终点，我们以始为终，先看看最初定下的目标有没有实现： - 能够深入理解 TS 类型编程的相关知识 - 能挑战完大部分 type-challenges 题 - 能理解开源项目中的 Typescript 定义就我个人而言，在学习和挑战 type-challenges 过程中是对 TS 类型有了更深入的了解，那么最后我们再看一下开头提到的 Prisma 类型定义到底说的什么意思。 ![snipshot.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53b4531da8a340daacad1155b92d824d~tplv-k3u1fbpfcp-watermark.image?) - 首先它是一个泛型，接受一个参数 `T`，并且这个参数需要符合 `UserGroupByArgs` 这个类型 - 返回一个 `PrismaPromise` 包裹的 `Array` - 数组的每个元素是由 `PickArray` 以及另一个复杂对象构成 - 复杂对象 key 由 `T` 和 `UserGroupByOutputType` 共有的属性构成 - 复杂对象 value 需要判断是否有 `_count` 属性以及 `_count` 是否为 `boolean` 类型，如果都符合，则返回 `number`，其他属性则返回 `GetScalarType>` 到这里，终于算是结束了，散会，撒花 ✿✿ヽ(°▽°)ノ✿