TypeScript: 解密真正的“或”逻辑

2023-12-03 02:05:58

TypeScript中的联合类型

在 TypeScript 中，使用 | 操作符来定义联合类型。联合类型允许一个变量同时具有多个类型。例如：

let x: string | number;
x = "Hello";
x = 10;

在这个例子中，变量 x 可以是字符串也可以是数字。

真正的“或”逻辑

然而，联合类型并不完全等同于我们理解的“或”逻辑。联合类型更像是“并”的概念，即变量可以同时具有多个类型。真正的“或”逻辑意味着变量只能具有一个类型，并且在运行时根据条件来决定是哪个类型。

实现真正的“或”逻辑

为了实现真正的“或”逻辑，我们需要使用一些“黑科技”。一种方法是使用 discriminated union。Discriminated union 是一个联合类型，其中每个类型都具有一个共同的属性，该属性用于区分不同的类型。例如：

interface Shape {
  type: "circle" | "square";
}

class Circle implements Shape {
  type = "circle";
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }
}

class Square implements Shape {
  type = "square";
  sideLength: number;

  constructor(sideLength: number) {
    this.sideLength = sideLength;
  }
}

function getArea(shape: Shape): number {
  switch (shape.type) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
  }
}