揭开 TypeScript 类型系统的神秘面纱：断言、类型守卫、泛型、模式匹配深度解析

前端

2023-09-19 09:46:05

进入 TypeScript 世界，我们不能错过断言、类型守卫、泛型和模式匹配这些核心概念。这些特性共同构成了 TypeScript 类型系统的神秘面纱，帮助我们构建更强大的应用程序。

断言：消除类型不确定的困扰

类型断言，顾名思义，就是断定一个变量的类型。当 TypeScript 无法确定一个联合类型的变量到底是哪一个类型时，我们可以使用类型断言来明确它的类型，从而访问该类型独有的属性和方法。

语法：<variable> as <type>

示例：
```
let x: number | string = "hello";
console.log((x as number).toFixed(2)); // 输出：NaN
```
在上面的示例中，我们使用类型断言将联合类型变量 x 断言为 number 类型，然后调用 toFixed() 方法，该方法只适用于 number 类型。
类型守卫：揭开联合类型的真面目

类型守卫是 TypeScript 中用于检查一个变量是否属于某个特定类型的一种机制。有了它，我们就可以在运行时确定一个联合类型的变量到底是哪一个类型，并根据不同的类型执行不同的操作。

类型守卫的类型有：
- 类型谓词函数： 一个布尔函数，用于检查一个变量是否属于某个特定类型。
语法：
```
function isString(x: unknown): x is string {
  return typeof x === "string";
}
```
- 类型别名： 一个新的类型别名，代表联合类型中的一种类型。
语法：
```
type StringOrNumber = string | number;
type StringType = StringOrNumber extends string ? StringOrNumber : never;
```
- 模式匹配： 使用 switch 语句或 if 语句来检查一个变量是否属于某个特定类型。
语法：
```
switch (x) {
  case "hello":
    console.log("x is a string");
    break;
  case 123:
    console.log("x is a number");
    break;
}
```
泛型：释放类型变量的力量

泛型是 TypeScript 中定义具有参数的函数、接口或类的特性。这些参数可以是任何类型，当函数、接口或类被调用或实例化时，这些参数被替换为实际类型。

语法：
```
function identity<T>(x: T): T {
  return x;
}
```
在上面的示例中，identity 函数是一个泛型函数，它接受一个参数 x，并返回与 x 相同类型的值。
模式匹配：用优雅的代码处理不同类型

模式匹配是一种在运行时检查一个变量是否属于某个特定类型，并根据不同的类型执行不同操作的机制。它类似于类型守卫，但使用更简洁、更具可读性的语法。

语法：
```
const x = "hello";

switch (x) {
  case "hello":
    console.log("x is a string");
    break;
  case 123:
    console.log("x is a number");
    break;
}
```
在上面的示例中，我们使用模式匹配来检查变量 x 是否属于字符串类型或数字类型。如果 x 是字符串，则输出 "x is a string"；如果 x 是数字，则输出 "x is a number"。