深入理解 TypeScript 中的Union联合类型

在 TypeScript 中，联合类型是一项强大而灵活的特性，它允许我们声明一个变量可以存储多个不同类型的值。通过联合类型，我们可以增加代码的表达能力和类型安全性。

基本概念

要创建一个联合类型，我们使用竖线（|）将多个类型连接起来。例如，考虑一个接受字符串或数字的函数：

function printValue(value: string | number) {
  console.log(value);
}

在上面的示例中，value 可以是字符串或数字类型中的任意一种。这样的定义提供了更大的灵活性，使得我们能够处理不同类型的数据。

类型保护与类型推断

当我们使用联合类型时，通常需要根据具体的类型执行相应的操作。TypeScript 提供了几种类型保护机制来解决这个问题。

typeof 类型保护

typeof 类型保护允许我们在运行时对值进行类型检查，特别适用于原始类型。例如，我们可以使用以下代码来检查值是否为字符串，并进行相应的操作：

function printValue(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value);
  }
}

在这个例子中，我们通过 typeof 操作符检查 value 的类型，并根据结果执行不同的操作。

instanceof 类型保护

如果我们在联合类型中包含了类，我们可以使用 instanceof 类型保护来判断具体的类实例。例如：

class Cat {
  meow() {
    console.log('喵喵！');
  }
}

class Dog {
  bark() {
    console.log('汪汪！');
  }
}

function makeSound(animal: Cat | Dog) {
  if (animal instanceof Cat) {
    animal.meow();
  } else if (animal instanceof Dog) {
    animal.bark();
  }
}

在上面的示例中，我们使用 instanceof 操作符来区分 Cat 和 Dog 类型的实例，并根据具体的类型执行相应的方法。

区分联合类型

当联合类型的成员拥有公共属性时，我们可以使用区分联合类型（Discriminated Union）来进一步增强代码的可读性和类型安全性。

interface Square {
  kind: 'square';
  sideLength: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Circle {
  kind: 'circle';
  radius: number;
}

type Shape = Square | Rectangle | Circle;

function printArea(shape: Shape) {
  switch (shape.kind) {
    case 'square':
      console.log('正方形的面积：', shape.sideLength * shape.sideLength);
      break;
    case 'rectangle':
      console.log('矩形的面积：', shape.width * shape.height);
      break;
    case 'circle':
      console.log('圆形的面积：', Math.PI * shape.radius * shape.radius);
      break;
  }
}

在上述示例中，我们使用了一个公共的 kind 属性来区分不同类型的图形。通过检查这个属性，我们可以在 switch 语句中进行全面的类型判断，并执行相应的代码逻辑。

总结

联合类型是 TypeScript 中一个重要且强大的特性。通过联合类型，我们可以处理多种类型的值，增加代码的表达能力和灵活性。同时，类型保护和区分联合类型等机制也为我们提供了更好的类型安全性。深入理解并善用联合类型，将有助于编写出更健壮、可维护的 TypeScript 代码。