--- theme: juejin highlight: an-old-hope --- ![hero.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82c78932711c416792c71286afbc102a~tplv-k3u1fbpfcp-watermark.image?) > TypeScript作为一种类型更安全、维护性更强的JavaScript代码方式迅速流行。然而，它容易开始，却难以掌握高级特性；本文将介绍五个技巧，这些技巧将帮助您改进TypeScript代码。 ## 阅读本文你将掌握以下5种技巧： 1. 使用类型作为`集合` 2. 使用`联合判别`作为可选字段替代 3. 使用`类型谓语`精确类型 4. 使用`枚举`优化代码 5. 使用`泛型`提高代码灵活性注：阅读本文中提供的代码示例，可以使用官方的 [TypeScript 练习场](https://www.typescriptlang.org/play)
## 1.使用类型作为集合集合理论：彼此不同且具有一些共同属性的元素的集合。集合理论可以帮助您更好地推断TypeScript类型行为。类型是变量可以保存的一组可能值。例如，`number`类型是数字的集合。 ```typescript let x: number; // 一组所有可能的数字 x = 123 // 123是个可能的数字 x = 'Hello' // 会抛出错误，因为hello是字符串，而不是数字 ``` 从上面的代码中，变量`x`是类型`number`的成员，因为它可以保存一个数字，在本例中是`123`。但是，尝试分配`string`，例如`"Hello"`，会触发报错，因为`x`不是`string`类型的成员。因此，我们可以说`x`是类型`number`的子集。此外，如果两个类型不相同，要分配成功，就会发生类型转换过程。类型转换是覆盖类型的过程。这个过程以两种形式发生：向上转换和向下转换。在向上转换过程中，更具体类型的变量被分配给更通用类型的变量。为了更好地解释这一点，请考虑下面代码中具有不同类型的两个变量： ```ts let name: string = 'John'; let nameLiteral: 'Patrick' | 'James' | 'Wood' = 'Patrick'; name = nameLiteral; // 向上转换被允许 ``` 变量`name`具有`string`类型，变量`nameLiteral`具有三个特定字符串类型：`Patrick`、`James`和`Wood`。允许将`nameLiteral`赋值给`name`，因为`nameLiteral`的类型是`name`类型的适当子集，这使得它是类型安全的。换句话说，`Patrick`、`James`或`Wood`都是字符串，由于`name`是`string`类型，TypeScript编译器不会发现问题。但是，反转赋值将**向下转换**，这通常是不允许的。这是因为`name`是比`nameLiteral` `Patrick` `James` `Wood` 更大的`string`集合 ```typescript let name: string = 'John'; let nameLiteral: 'Patrick' | 'James' | 'Wood' = 'Patrick'; nameLiteral = name; // 向下转换不被允许 ``` 集合运算符的概念，如`union`、`intersection`、`difference`和`complements`，也可以用来将现有集合组合成新集合，以理解TypeScript中的类型组合。然而，TypeScript只使用其中两个运算符作为类型运算符：`|`运算符用于联合，`&`运算符用于交集。然而，当使用它们组合类型（接口）时，它们的行为与直觉相反。考虑下面的代码片段： ```ts type User = { getId(): number; getName(): string; } type Admin = { getId(): number; getUserName(): string; } declare function Person(): User | Admin; const person = Person() person.getId() // succeeds person.getName() //fails person.getUsername() // fails ``` TypeScript中的`|`运算符称为联合类型运算符，对于习惯于将`|`运算符视为其他上下文（例如布尔逻辑）中的逻辑`OR`运算符的开发人员来说，有时会产生误导。相反，它创建了一个包含组成类型共享的属性和方法交集的类型。因此，`User`和`Admin`的联合将只返回两者共有的属性和方法。另一方面，将`&`运算符视为逻辑`AND` `(&&)`也可能会产生误导。 ```ts type User = { getId(): number; getName(): string; } type Admin = { getId(): number; getUserName(): string; } declare function Person(): User & Admin; const person = Person() person.getId() // succeeds person.getName() //succeeds person.getUsername() //succeeds ``` 总之，TypeScript中的`|`运算符表示一个联合类型，并采用所涉及类型的`交集`。相比之下，`&`运算符表示一个`交集类型`，并结合了多个类型的特征。理解这种区别对于避免误解TypeScript代码中的预期行为非常重要。
## 2.使用联合判别作为可选字段替代假设您正在开发一个与各种API交互的TypeScript应用程序，并且您需要处理不同类型的响应，例如成功的数据检索或错误通知。为此，您通常可以使用可选字段或条件类型检查，如下例所示： ```ts interface APIResponse { success: true | false; data?: number; error?: string; } function handleAPIResponse(response: APIResponse) { return (response.success) ? response.data : response.error } ``` 尽管可选字段可能看起来很方便，但重要的是要注意上述函数可能会返回`undefined`。这是因为`data`和`error`值都可以是`undefined`的，也可以是接口属性中定义的特定值。要可视化这个概念，请参阅随附的图像以获得更清晰的理解。 ![-](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67c87245dd4d48e08c2c4cd6a4012915~tplv-k3u1fbpfcp-zoom-1.image) 相反，使用联合判别，我们可以在两个接口之间创建关系，从而提供更优雅和类型安全的解决方案： ```ts interface SuccessResponse { success: true; data: number; } interface ErrorResponse { success: false; error: string; } interface APIResponse = SuccessResponse | ErrorResponse; function handleAPIResponse(response: APIResponse) { (response.success) ? response.data: response.error } ``` 通过与联合判别建立关系，该函数将返回接口属性中定义的特定值，如下图所示： ![-](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8af68af7d3d94535893ca6f063bb58ba~tplv-k3u1fbpfcp-zoom-1.image) 我们不使用可选字段，而是通过使用联合判别来确保类型安全、管理特定于变体的逻辑以及提高代码易读性和可运维性。
## 3.使用类型谓语精确类型想要在TypeScript中精确函数返回值的类型，谓语会派上用场。使用类型谓语，可以定义一个返回值为布尔类型的函数，以此来检查值是否属于特定类型。谓语通常以`variable is type`的形式定义，用于函数的返回类型，如下所示： ```ts function func(var: any): var is Type { return /* boolean expression */ } ``` 在上面的示例函数中，`func`接受`any`类型的参数`var`并返回布尔值，`var is Type`表达式表示其返回值是类型谓语。现在您了解了它的语法，让我们探索如何在实践中使用类型谓语： ```ts type Fish = { swim:() => void } type Bird = { fly:() => void } function isFish( pet: Fish | Bird ): pet is Fish { return (pet as Fish).swim !== undefined } ``` 在上面的例子中，我们定义了两种[类型](https://blog.openreplay.com/five-tips-to-improve-your-typescript-code/#https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases)：`Fish`有一个方法`swim`，`Bird`有一个方法`fly`。通过在函数`isFish`中指示类型谓语`pet is Fish`，我们向编译器表示，如果表达式`(pet as Fish).swim !== undefined`为真，也就是说，如果`pet`有`swim`方法，那么该值将属于`Fish`类型；否则它将被归类为`Bird`类型。这个概念非常方便，因为它允许编译器缩小类型范围，保证我们只处理控制语句中的特定类型。通过使用此构造，我们可以将准确的类型传递给编译器，使其能够理解我们正在使用的类型，如下所示： ```ts function getFood(pet: Fish | Bird) { if(isFish(pet)) { pet // if true, pet is of type Fish return 'fish food' } else { pet //if false, pet is of type Bird return 'bird food' } } ``` 通过使用类型谓语，可以向编译器提供有关变量类型的附加信息；这有助于编译器进行精确的[类型推断](https://www.typescriptlang.org/docs/handbook/type-inference.html#handbook-content)。这也可以帮助我们作为开发人员更快的调试。
## 4.使用枚举优化代码在TypeScript中，枚举是能够编写一组命名常量的数据类型。枚举将相关值定义为`numbers`或`strings`。由于它们允许对相关值进行分组，因此这是组织代码的一种非常有用的方式，有助于类型安全。要定义`enum`，请在`enum`关键字后跟其名称，然后在花括号中的命名常量，如下所示： ```ts enum Color { Red, Green, Blue } // 使用 let color = Color.Red; ``` 默认情况下，第一个`enum`键默认值为`0`，除非另有定义（它也可以定义为字符串或分配自定义数值），然后为每个成员递增`1`。这就是上面的示例在幕后的样子： ```ts enum Color { Red = 0, Green = 1, Blue = 2, } ``` 您还可以决定枚举的第一个成员的数值，然后其他成员从该值增加`1`： ```ts enum Color { Red = 1, Green, Blue } ``` 上图翻译为`Red = 1`，`Green = 2`，`Blue = 3`。 `Enums`在有限数量的常量值情况下特别有用，例如一周中的几天。使用`enum`可以提供一种更结构化，类型更安全的方法来处理这些值： ```ts enum Weekdays { Sunday = 1, Monday Tuesday, Wednesday, Thursday, Friday, Saturday } ``` 了解有关枚举的更多信息，请查看这 [篇文章。](https://blog.openreplay.com/five-tips-to-improve-your-typescript-code/#https://blog.logrocket.com/writing-readable-code-with-typescript-enums-a84864f340e9/)
## 5.使用泛型提高代码灵活性 TypeScript的泛型允许开发可重用的、类型安全的组件。这些组件可以处理各种数据类型。通过特定的开发函数、类和接口，就可以对任何数据类型进行操作，增加了编程的灵活性。泛型在TypeScript代码中声明为``，其中`T`代表已传入的类型 - 您可以将``解释为类型`T`的泛型作为将在生成结构实例时定义的类型的占位符，`T`在这种情况下的作用类似于参数在函数中的作用。示例如下，我们将声明一个泛型类型为`T`的函数-类型`T`也是参数和返回值的类型，如下所示： ```ts function func(value: T):T { return value; } const result = func('Hello John'); ``` `T`现在具有类型`Hello John`，传递给函数调用的确切参数： ![-](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd45bc1b35cc461b96295c47f49e590f~tplv-k3u1fbpfcp-zoom-1.image) 这也适用于变量`result`： ![-](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a75fe53886234330a5255a7e1ff0d8e5~tplv-k3u1fbpfcp-zoom-1.image) 但是，您可能希望您的代码返回所需的类型。那么可以通过将所需类型设置为泛型类型参数来指定，如下所示： ```ts function func(value: T): T { return value; } const result = func('Hello John'); ``` 在上面的示例中，类型`T`现在是类型`string`： ![-](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d7ec71e16fe4eb2b2d91a8502db5edf~tplv-k3u1fbpfcp-zoom-1.image) 泛型允许您构建可重用的、适应性强的组件，这些组件可以处理各种数据类型，而不会影响类型的安全性或代码易读性。因此，您可以根据需要快速调整和扩展组件以使用新的数据类型，从而随着时间的推移赋予代码更大的灵活性和可维护性。
## 结论总之，TypeScript是编写可扩展与可维护代码的强大工具。通过合并类型注释、联合类型、类型谓语、枚举和泛型，大大提高了代码类型的安全性和灵活性。类型注释有助于及早发现错误并提供更好的文档，而联合类型和枚举使代码更具可读性，代码一目了然。类型谓语和泛型为代码增加了更多的灵活性，允许您创建可重用、可适应的函数和 [类](https://www.typescriptlang.org/docs/handbook/2/classes.html#handbook-content)。然而，以上这几点只是TypeScript特性和优势的冰山一角。希望可以帮助您更多地了解该语言并找到改进代码的新方法。TypeScript提供的强大的工具、紧凑的类型以及对JavaScript代码特性的支持，您可以更好更快的生成代码。本文为译文 [原文链接](https://blog.openreplay.com/five-tips-to-improve-your-typescript-code/)