--- theme: fancy highlight: arduino-light --- > 「本文已参与好文召集令活动，点击查看：[后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767)」 ## 前言一直想写这篇文章。但是碍于前期准备不足，一直修修补补的，到现在才发布。本文是我在使用 typescript 一年多的一些实践经历，在这一年的时间里我逐渐深入理解并爱上了这门语言。同大多数人一样，我也是从一开始的`anyScript`开始，后来开始慢慢改变，从粗暴地标识类型，再到使用类型推断与泛型，然后到可以自己写一些类型工具函数。本文就来详细讲讲我在其中遇到了哪些坑和"面向类型编程"的一些实践操作。 > 本文不会过于注重 typescript 的基础，且需要你对基本的 typescript 语法以及泛型的概念有所理解，如果学习基础可以看看我之前写的 [TypeScript 知识汇总](https://juejin.cn/post/6844903709172826119) 系列。 ## 基础篇本篇虽然是基础篇，但并不是说这篇讲的是 typescript 的基础部分。相反，这些东西可能初学者可能或相对少用，先确保你已经初步了解过这些内容，下面只是对日常开发中会经常用到东西做一个提示或补充。 ### keyof、in 与 [] 符号对索引类型的操作 > 下面三个操作符都是针对具有索引的类型操作的，并且大多只能在 type 定义类型时使用（索引类型的`[]`除外）。首先先对这三个符号做一个解释： - `[]`是**索引访问操作符**。可以单独使用相当于是对象书写的`[]`形式，也可以与`keyof`和`in`操作符一起使用，先简单讲一下单独使用的效果： ```ts interface Foo { a: number b: string c: boolean } // 会有提示的 type FooKey = Foo['a'] // number ``` 就是这么简单，`[]`操作符可以让我们直接获取到某个索引的类型。同时，它还支持我们传入联合类型： ```ts interface Foo { a: number b: string c: boolean } // string | number | boolean type FooKey = Foo['a' | 'b' | 'c'] // 只要是符合上面属性的类型都可以联合 ``` 返回的结果也是所有索引值类型组成的联合类型。和其他操作符配合使用请继续往下看。 - `keyof`是**索引类型查询操作符**。假设 T 是一个类型（**这个类型一般是一个对象类型，或者说可以用`interface`书写的类型**），那么 keyof T 产生的类型是 T 的属性名称字符串字面量类型构成的**联合类型**。举个例子： ```ts interface Foo { a: number b: string c: boolean } // 'a' | 'b' | 'c' type FooKey = keyof Foo ``` 结合上面的`[]`操作符： ```ts interface Foo { a: number b: string c: boolean } // string | number | boolean type FooKey = Foo[keyof Foo] ``` 怎么样，是不是感觉更简便了呢。 **注意：** 虽然我们可以像下面这样使用： ```ts type Bar = 'a' | 'b' | 'c' type BarKey = keyof Bar ``` 但是得到的答案肯定不是符合你预期的，`Bar`会被识别为字符串类型，而`keyof`就会遍历所有字符串的属性和方法，这显然不是我们想要的答案，所以我才会强调**这些操作符都是针对索引的，使用者应该是有索引的对象或数组**。 - `in`是**索引遍历操作符**。算是 typescript 在类型上对于`in`操作符的一个补充，同执行代码一样，`in`操作符可以让我们遍历**联合类型**的每一项并将其单独抽离为一个索引： ```ts type Foo = 'a' | 'b' | 'c' /* type FooObj = { a: any; b: any; c: any; } */ type FooObj = { [K in Foo]: any } ``` 可以看到，`in`操作符能够将遍历后的联合类型生成一个新的对象类型。这就很有意思了，配合之前的`keyof`操作符，我们就能把它们结合起来把一个类型映射为另一个类型： ```ts // 将 T 中的索引全部变为可读类型 type Partial = { [P in keyof T]?: T[P] } ``` 实际上，在 typescript 中很多内置的工具类型都会使用到这些映射相关的操作符，并且我们下面的很多例子也都用到了这些特性，请牢记它们的用法。 ### const 类型断言在 typeScript 3.4 中引入了一种用于文字值的新构造，称为`const`断言。它的语法是类型断言，`const`代替类型名（例如`123 as const`）。当我们使用`const`断言构造新的文字表达式时，我们可以向语言发出信号： - 该表达式中的任何文字类型都不应扩展 - 对象文字获取readonly属性 - 数组文字变成readonly元组 ```ts // Type '"hello"' let x = 'hello' as const // 类型为 'hello'，不能变为 string // 上面这样其实同 const a = 'hello' // 一般 as const 会对数组或者对象使用 // Type 'readonly [10, 20]' const y = [10, 20] as const // Type '{ readonly text: "hello" }' const z = { text: 'hello' } as const ``` `const`断言可以帮助我们在减少一些比较复杂的类型书写，举个例子： ```ts // Type: function Foo(): (number | (() => void))[] function Foo() { let count = 0 const setCount = () => { count++ } return [count, setCount] } ``` 上面函数分返回值在不加`as const`时是一个联合类型的数组，这明显不符合我们的要求，在这种情况下**我们需要手动在函数返回值处标明**。当然，更简单的用法还是加上`as const`断言 ```ts // Type: function Foo(): readonly [number, () => void] function Foo() { let count = 0 const setCount = () => { count++ } return [count, setCount] as const } ``` 这样，在调用时才能得到正确的元组类型。 **注意：** - **`const`断言只能立即应用于简单的文字表达式。** ```ts // Error! A 'const' assertion can only be applied to a // to a string, number, boolean, array, or object literal. let a = (Math.random() < 0.5 ? 0 : 1) as const // Works! let b = Math.random() < 0.5 ? (0 as const) : (1 as const) ``` - **`const`上下文不会立即将表达式转换为完全不可变的（只是浅转换）。** ```ts const arr = [1, 2, 3, 4] let foo = { name: 'foo', contents: arr } as const foo.name = 'bar' // error! foo.contents = [] // error! foo.contents.push(5) // ...works! // 如果要限制这里，需要 const arr = [1, 2, 3, 4] as const ``` ### interface 的声明合并我们知道定义一个类型的方法有`interface`和`type`两种，`interface`有一个很特殊的特性，就是可以进行类型合并，如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6928f7e711340c1b585003b0069c0af~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6dcc8c2a11c4163a8fabd80a32f3ffa~tplv-k3u1fbpfcp-watermark.image) 所以说，使用`interface`定义的类型是可以在之后进行修改的。而使用`type`定义的类型没有类型合并的特性，定义后就不能够再次修改，只能作为别名使用。基于这种特性，我们或许可以解释下面这个问题： ```ts export interface IFoo { id: string } export interface IFoo2 { id: string [key: string]: string } type TFoo = { id: string } function foo(payload: Record) {} const iPayload: IFoo = { id: 'payload' } const iPayload2: IFoo2 = { id: 'payload' } const tPayload: TFoo = { id: 'payload' } /* 类型“IFoo”的参数不能赋给类型“Record”的参数。类型“IFoo”中缺少索引签名。 */ foo(iPayload) // 正常执行 foo(iPayload2) // 正常执行 foo(tPayload) ``` 在上面这个例子中，只有设置了索引类型的`interface`和`type`定义的类型可以传入到`foo`函数的参数中，正是因为有`interface`的类型合并的能力，所以我们不能够保证在之后`IFoo`的类型是否会发生改变，但在加了索引类型后，就规定了索引类型的值必须为`string`类型，无论怎么改变都会与函数的参数类型匹配，也就通过了 typescript 的检测。正如上面所说，当我们的`foo`函数的类型定义为： ```ts function foo(payload: Record) {} ``` 的时候，上面创建的三个类型都是可以使用的，因为索引值为`any`可以兼容到任何的类型，也就不用担心`interface`的类型合并问题了。 ### 泛型的基本用法 **注意了！** 泛型在 typescript 中作用是非常大的，基本也是我们日常最常用的特性，所以能熟练使用泛型参数我认为是非常重要的。 **泛型可在类、函数或类型创建时声明**，我们可以在使用上述结构时传入泛型的参数值（**在大多数使用场景中我们都不会手动传入，而是利用 typescript 的自动推断功能**，这个在之后会提高篇细说），从而动态限制上述结构的使用类型。这里就简单列举一下三种结构对应的书写格式吧： - 函数: ```ts function foo(bar: T): T { return bar } foo(1) ``` 调用时传入泛型参数，限制传入的参数类型（不写 number 也是可以的，写了会手动限制传入 foo 的类型必须是 number 类型）。 - 类： ```ts // 在这定义泛型参数 class Foo { // 借用泛型参数约束方法类型 add(value: T): void { } } // 通过泛型实现类不同变量类型的内部算法,比 any 类型效率更高 const foo1 = new Foo() foo1.add(1) // 只能传入 numbwr 类型 const foo2 = new Foo() min2.add('a') // 只能传入 string 类型 ``` - 类型： ```ts /* type Foo = { value: T keys: (keyof T)[] } */ interface Foo { value: T keys: (keyof T)[] } // 识别可赋值类型 const foo: Foo<{ a: number; b: string }> = { value: { a: 1, b: '1' }, keys: ['a', 'b'] } ``` 同时，泛型可以使用`extends`关键字进行约束： ```ts // T extends string 代表 T 的类型是继承子 string 类型的，或者说 T 的类型是 string 类型的子集 function foo(bar: T): T { return bar } foo(1) // error! ``` 在这里面，因为我们限定了`T`的类型必须是`string`类型的子集，所有传入`number`类型就会报错了。 ### 函数重载使用过其他类似`Java、C++`这类语言的同学一定对函数重载这个名字有所了解，不过 typescript 中的函数重载完全不同`Java、C++`这类语言，它的函数重载并不是在编译时`overload`，因为它需要和 javascript 具有互操作性，无法生成多个函数，所以仅仅只是**函数签名重载**，至于相关的条件判断只能我们在真正的函数体内部自行判断了。下面是简单的用法： ```ts // 前两个是重载签名，后一个是真正的函数实现，前面两个才是真正的函数类型，最后的实现函数的相关参数和返回值的类型必须要同时兼容上面所有的签名 function fun(name: string): string function fun(age: number): string function fun(payload: string | number): string { if (typeof payload === 'string') { return 'name: ' + payload } else { return 'age: ' + payload } } // fun 函数能传入的参数只能是 string 和 number ,传入其他参数会报错 console.log(fun('foo')) console.log(fun(18)) console.log(fun(true)) // error ``` **使用场景** 函数重载主要是针对函数有多种固定的参数或返回值时才使用，比如我们要实现一个**同时支持回调函数和`Promise`的函数**： ```ts function add(a: number, b: number, cb: (res: number) => void): void function add(a: number, b: number): Promise function add( a: number, b: number, cb?: (res: number) => void ): Promise | void { const res = a + b if (cb) { cb(res) } else { return Promise.resolve(res) } } // 下面两种方法都是有提示的 add(1, 2, (res) => console.log(res)) add(1, 2).then((res) => console.log(res)) // 这种就会报错了，只能二选一 add(1, 2, (res) => console.log(res)).then((res) => console.log(res)) ``` ### 条件类型的使用 typescript 中的条件类型需要依靠`extends`关键词进行判断，其判断方式类似三元表达式，格式如下： ```ts type Type = T extends U ? X : Y ``` 如果`T`是`U`的子类，那么返回`X`，否则返回`Y`。更特别一点的，可以这样： ```ts type TypeName = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T extends undefined ? undefined : T extends () => void ? () => void : object type Type = TypeName<() => void> // () => void type Type = TypeName // object ``` 因为没有`if`语句，所以我们通常都会使用这种三元表达式的嵌套实现深层判断。 #### 分布式条件类型分布式条件类型是条件类型下面的子集，如果条件类型里待检查的类型是`naked type parameter`（裸类型参数），那么它也被称为分布式条件类型。分布式条件类型在实例化时会自动分发成联合类型。例如，实例化`T extends U ? X : Y`，`T`的类型为`A | B | C`，会被解析为`(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)`。 > **裸类型参数：** 没有被其他类型参数包裹的参数，比如`(string | number)[]`就是被其他类型包裹的参数，而`string | number`就不是。还是拿我们上面的例子： ```ts type TypeName = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T extends undefined ? undefined : T extends () => void ? () => void : object type Type = TypeName<(() => void) | string[]> // () => void | object ``` 可以看到，我们的联合类型被分别解析并形成了新的联合类型。 ### infer 的使用 `infer`操作符必须要搭配条件类型（搭配`extends`关键字）使用，`infer`是用来用做类型推断并赋值的，后面通常跟一个泛型变量，推断后的返回类型交给后面跟着的泛型变量，用于对其某个方面作出解析。这个操作符通常会在我们书写类型工具的时候起到重要作用。举个例子： ```ts // 如果成立 infer 能推断出数组中元素的类型并且赋值给 U type Type = T extends Array ? U : T // 判断类型是数组，解析 type Test = Type // string // 判断类型不是数组，直接返回 type Test2 = Type // string ``` 基本的使用方法很简单，但是我们却可以基于`infer`推断的类型从原类型衍生出非常多的拓展类型，具体可以看看下面实战篇。 ### 使用内置类型 typescript 本身为我们提供了很多有用的内置类型工具，我们可以很方便的使用这些类型工具得到我们想要的类型。至于平常如何使用。举个例子，我会在项目中使用`Record`创建一个对象类型，从而代替`any`做一个索引类型的约束。使用`Required['xxx']`的形式将某个索引类型的值全部转为必选并拿到其必选时的定义类型（直接用已存在的类型定义变量类型）等。 ```ts interface ButtonProps { onClick?: (e: MouseEvent) => void } const foo: Record = {} const bar: Required['onClick'] = (e) => { console.log(e) } ``` > 另外有兴趣的同学可以看一下 [utility-types](https://github.com/piotrwitek/utility-types) 这个仓库，里面有一些泛用性很高的拓展工具函数。 #### 针对索引类型针对索引类型的主要有：`Partial`、`Required`、`Readonly`、`Pick`、`Omit`和`Record`。 ```ts // 针对索引类型 /** * Make all properties in T optional */ // 让 T 的所有属性变为可选 type Partial = { [P in keyof T]?: T[P }; /** * Make all properties in T required */ // 让 T 的所有属性变为必选 type Required = { [P in keyof T]-?: T[P]; }; /** * Make all properties in T readonly */ // 让 T 的所有属性变为只读 type Readonly = { readonly [P in keyof T]: T[P]; }; /** * From T, pick a set of properties whose keys are in the union K */ // 从 T 中提取 K 集合中的属性（过滤操作） type Pick = { [P in K]: T[P]; }; /** * Construct a type with the properties of T except for those in type K. */ // 与 Pick 相对应，从 T 中提取不是 K 集合中的属性（过滤操作） type Omit = Pick>; /** * Construct a type with a set of properties K of type T */ // 构造一个有以 K 中的集合元素作为属性，T 作为值的类型 type Record = { [P in K]: T; }; ``` #### 针对联合类型针对联合类型的主要有：`Exclude`、`Extract`、`NonNullable` ```ts // 针对联合类型 /** * Exclude from T those types that are assignable to U */ // 去除 T 类型中的 U 类型 type Exclude = T extends U ? never : T; /** * Extract from T those types that are assignable to U */ // 提取 T 类型中的 U 类型 type Extract = T extends U ? T : never; /** * Exclude null and undefined from T */ // 去除 T 类型中的 null 和 undefined 类型 type NonNullable = T extends null | undefined ? never : T; ``` #### 针对函数针对函数的主要有：`Parameters`、`ReturnType`、`ConstructorParameters`、`InstanceType`以及针对`this`标记的`ThisType` ```ts // 针对函数 /** * Obtain the parameters of a function type in a tuple */ // 获取函数参数类型（一个元组） type Parameters any> = T extends (...args: infer P) => any ? P : never; /** * Obtain the return type of a function type */ // 获取函数返回值类型 type ReturnType any> = T extends (...args: any) => infer R ? R : any; /** * Obtain the parameters of a constructor function type in a tuple */ // 获取构造函数参数类型（一个元组） type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never; /** * Obtain the return type of a constructor function type */ // 获取构造函数的实例类型 type InstanceType any> = T extends abstract new (...args: any) => infer R ? R : any; /** * Marker for contextual 'this' type */ // 标记 this 的类型，存个疑吧，我自己本身也没用过这个类型，实际项目基本没有用，如果要对 this 做标记的话感觉直接将类型赋值给 this 就行了。 interface ThisType { } ``` #### 针对字符串模板针对字符串模板的主要有：`Uppercase`、`Lowercase`、`Capitalize`、`Uncapitalize`，这几个的实现都是 typescript 内部的固有属性，一般记住有这个工具类型就行了。 ```ts // 针对字符串模板 /** * Convert string literal type to uppercase */ // 将字符串类型所有字符转换为大写 type Uppercase = intrinsic; /** * Convert string literal type to lowercase */ // 将字符串类型所有字符转换为小写 type Lowercase = intrinsic; /** * Convert first character of string literal type to uppercase */ // 转换第一个字符为大写 type Capitalize = intrinsic; /** * Convert first character of string literal type to lowercase */ // 转换第一个字符为小写 type Uncapitalize = intrinsic; ``` ### 类型保护的使用类型保护也是 `typescript`中的一个比较有意思的特性，使用它可以帮助我们缩小类型选择的范围，封装一些特定类型的类型保护可以简化一些大量使用类型断言的场景。主要的类型保护机制有三种形式： - 使用`typeof`： ```ts function padLeft(value: string, padding: string | number) { if (typeof padding === 'number') { return Array(padding + 1).join(' ') + value } if (typeof padding === 'string') { return padding + value } throw new Error(`Expected string or number, got '${padding}'.`) } ``` **注意:** `typeof`类型保护只有两种形式能被识别：`typeof v === "typename"`和 `typeof v !== "typename"`，其中，`"typename"`必须是`"number"`,`"string"`,`"boolean"`或`"symbol"`。 - 使用`instanceof`： ```ts interface Padder { getPaddingString(): string } class SpaceRepeatingPadder implements Padder { constructor(private numSpaces: number) {} getPaddingString() { return Array(this.numSpaces + 1).join(' ') } } class StringPadder implements Padder { constructor(private value: string) {} getPaddingString() { return this.value } } function getRandomPadder() { return Math.random() < 0.5 ? new SpaceRepeatingPadder(4) : new StringPadder(' ') } // 类型为SpaceRepeatingPadder | StringPadder let padder: Padder = getRandomPadder() if (padder instanceof SpaceRepeatingPadder) { padder // 类型细化为'SpaceRepeatingPadder' } if (padder instanceof StringPadder) { padder // 类型细化为'StringPadder' } ``` **注意:** instanceof的右侧要求是一个构造函数,typeScript 将细化为: - 此构造函数的`prototype`属性的类型，如果它的类型不为`any`的话。 - 构造签名所返回的类型联合。 - 使用`is`（自定义的类型保护）： ```ts class Fish { swim() { console.log('swim') } } class Bird { fly() { console.log('fly') } } function isFish(pet: Fish | Bird): pet is Fish { return (pet).swim !== undefined } ``` `pet is Fish`是类型谓词。谓词为`parameterName is Type`这种形式，`parameterName`必须是来自于当前函数签名里的一个参数名，并且函数的返回值也必须为`boolean`类型。在这其中，自定义的类型保护是最常用的，我们可以看看下面这段代码： ```ts const onClick = (e: MouseEvent) => { const scrollLeft = (e.target as Element).scrollLeft const scrollTop = (e.target as Element).scrollTop } ``` 再用类型保护来试试： ```ts // 我们可以不做任何事，单纯类型判断 function isElement(target: EventTarget): target is Element { return true } const onClick = (e: MouseEvent) => { // 这个时候 e.target 为 EventTarget if (isElement(e.target)) { // 这个时候 e.target 为 Element const scrollLeft = e.target.scrollLeft const scrollTop = e.target.scrollTop } } ``` 可以看到，使用类型保护可以帮助我们优化很多复杂的类型断言。 ### 断言签名 > 该概念是 typescript 3.7 后才引入的，一般在库的开发中有着大量使用。下面需要你有了解过 JavaScript 中一些断言库的概念。简单介绍下，假设现在有一个断言函数`assert`，当传入的值为真时不会有任何影响，传入假值则会抛出错误并提示给用户。 ```js function assert(condition, msg) { if (!condition) { // assert 库里面自己实现了 AssertionError，这边为了避免报错就用 Error 了 throw new Error(msg); } } assert(false, '应该传入真值') ``` 基于此，我们可以明确地在我们的程序中保证当前我们使用的值是符合规范的，这就是断言的作用： ```ts let value:any value = 'str' assert(typeof value === 'string', 'value 应该为字符串') // 可以放心使用 console.log(value.toUpperCase()) ``` 那么，你有没有想过，如果能够保证当前的值为`string`类型了，那么 typescript 为什么不能自动帮我们划分`value`的类型呢？在 typescript 3.7 之前，我们可能会这样做： ```ts assert(typeof value === 'string', 'value 应该为字符串') (value as string).toUpperCase() ``` 但是如果有很多处地方都需要用到该变量呢，也许还可以这样： ```ts let value:any value = 'str' assert(typeof value === 'string', 'value 应该为字符串') // 赋值给一个新的变量强行改变类型 const value2 = value as string value2.toUpperCase() ``` 通过二次赋值变量强行改变类型，这个方案确实可行，但是不显得很冗余吗？多了行完全没有作用的代码，只为了适应 typescript 的提示，未免有点本末倒置了。那试试`is`类型保护？确实，类型保护或许要优雅很多，实际上我在断言签名出来之前也是这样做的： ```ts // 直接返回值，这个函数只是为了改变 value 的类型 function is(value: any): value is T { return true } let value:any value = 'str' assert(typeof value === 'string', 'value 应该为字符串') if(is(value)) { value.toUpperCase() // 有提示了 } ``` 这样写确实好多了，但是还是有缺陷，你可以看到我们在使用类型保护时**必须要加入条件判断语句才能让类型保护生效**，当然如果你本身**在类型保护函数中做了条件判断**的话确实是最佳实践方式，但在这里我们仅仅只是修改`value`的类型，不要忘记我们在每个例子里都加入了`assert`的判断，在我们使用了`assert`后其实任何条件判断都是多余的。回过头来，typescript 给我们的解决方案是直接给`assert`函数本身添加新的能力，我们对之前的`assert`函数进行改造： ```ts function assert(condition: any, msg?: string): asserts condition { if (!condition) { throw new Error(msg); } } ``` `asserts condition`，这是 typescript 3.7 版本赋予`assert`函数的新能力，通过这种能力我们可以在调用`assert`函数时强制将其类型进行断言，在后续的代码上下文中都会遵循`condition`的判断条件，相当于无形中加了层类型保护的判断： ```ts let value:any value = 'str' assert(typeof value === 'string', 'value 应该为字符串') // 后面的上下文中都会在 typeof value === 'string' 的判断条件中 value.toUpperCase() // 有提示了 ``` 我们还可以配合之前用类型保护定义的`is`函数： ```ts assert(is(value), 'value 应该为字符串') value.toUpperCase() ``` 同理，后面我们的代码上下文都会在`is(value)`中，所以后面的`value`一样会有提示。除了使用`asserts condition`这样的写法，typescript 还给我们提供了另一种断言签名的写法。不检查条件，而是告诉 typeScript 一个特定的变量或属性有不同的类型。 ```ts // 和自定义类型保护的写法相同 function assertIsString(val: any): asserts val is string { if (typeof val !== "string") { throw new Error("Not a string!"); } } ``` 当然，我们也可以传入泛型，把上面通过`assert`和`is`两个函数实现的功能组合在一起： ```ts function assertType(value: any): asserts value is T { // do nothing } assertType(value) value.toUpperCase() ``` 可能这就是最简洁的类型判断条件了吧。当然，这样做就失去断言值的意义了，如果不是只想要改变变量类型，一般建议将其配合类型保护来使用，这样既能拿到正确的值，又能得到正确的类型。 ### 模板字符串类型这个类型是在 typescirpt 4.1 版本后出现的类型，其自带的一些特性可以极大程度上帮助我们简化类型的编写，该类型的写法是下面这样的： ```ts type World = "world"; type Greeting = `hello ${World}`; // 等同于 type Greeting = "hello world"，与 es6 的模板字符串很像 ``` 除此之外，字符串模板类型还可以自动帮助我们拆分联合类型，可以写出类似下面这样的类型定义： ```ts type XDirection = 'left' | 'right' type YDirection = 'top' | 'bottom' type Direction = `${YDirection}-${XDirection}` // 等同于 type Direction = "top-left" | "top-right" | "bottom-left" | "bottom-right" ``` 当然，还可以这样写： ```ts type Prefix = `${T}${string}` // 模板里可以是任何与字符串相关的类型 const foo1: Prefix<'foo-'> = 'foo-1' const foo2: Prefix<'foo-'> = 'foo-2' ``` 上面的`Prefix`工具函数就可以借助字符串模板类型让我们创建任何以泛型参数开头的字符串类型，在实际业务中利用这类方式也可以满足很多的类型需求。有趣的是，字符串类型也是可以使用`infer`关键字的，我们可以将符合某个规则的字符串类型单独将其子串提取出来： ```ts // 我们可以对匹配的模板格式解构处理 type Tool = T extends `${infer P}.${infer U}`? `${P}+${U}`:never // "a+b" type Test1 = Tool<`a.b`> // `a+${number}`，下面的用法在 Typescript 4.3 版本才能用，4.1 版本识别不出来 type Test2 = Tool<`a.${number}`> ``` Typescript 4.3 版本对字符串模板类型又进行了完善，可以完成很多复杂有趣的功能了，有兴趣的同学可以多去看看官方文档。 ## 提升篇 > 本篇是对 Typescript 中一些使用场景的个人理解。 ### 如何定义一个类型 #### interface 和 type 的区别 > 这里先说一下我个人认可的观点：用`interface`描述**数据结构**，用`type`描述**类型关系**。 - 首先，从语义上来说，`interface`接口的意义很明显，会**对我们定义的对象起到约束的作用**。而`type`类型别名则更多的是一个起名的作用，也就是说，**本质上其实并不是用它来做一些约束功能的，它仅仅代表着换了个名字，简化我们的类型写法**。 - 再者，从 TypeScript 为其赋予的功能讲，**`interface`只能够定义对象（函数）类型的结构，并且是可以进行继承的**。而 **`type`能定义的结构和定义的方式（比如`type Foo = typeof foo`）都会更多，不能够继承其他类型**，但是可以使用`&`交叉类型的方式进行模拟。 - 然后，从可变与不可变的角度来说，**`interface`由于具有类型合并的特点，所以是可变的，而`type`定义后就不能够再次修改，是不可变的**。具体的介绍在上一节中已经详细举例了，这里就不再赘述。至于在业务中到底用谁，`tslint`中的建议是当`interface`和`type`都可使用时优先考虑`interface`。个人认为在真实的场景中只要风格和团队保持一致就好，除了特定场景（我们上面提到的那些）外，没有什么是必须用`interface/type`的。 **再提个建议：** 当你不知道自己应该怎么定义类型的时候，那就使用`type`来定义吧。 #### 适当定义子类型其实也就是模块化思想，把写定义当做写组件模块吧。类似下面这样的： ```ts interface ComponentSize = 'small' | 'default' | 'large' interface ComponentType = 'primary' | 'warnning' | 'danger' interface ButtonProps { size: ComponentSize type: ComponentType } ``` 将一些可能在多个类型中都会用到的子类型抽离出来，提高代码整洁度。 #### 使用已定义类型在真实开发中我们可以这样： ```tsx import React from 'react' // 将 props 的类型定义到处 export interface ButtonProps { onClick: (e: React.MouseEvent) => void } const Button: React.FC = ({ children, onClick }) => { return } export default Button ``` ```tsx import React from 'react' import Button, { ButtonProps } from './button' const Demo: React.FC = () => { // 通过这种方式可以快速使用已定义的类型 const onClick: ButtonProps['onClick'] = () => {} return