深入浅出，掌握 TypeScript 基础：交叉类型和联合类型

2023-09-23 07:15:45

TypeScript 中的类型：一个集合论的视角

在 TypeScript 中，类型可以理解为一组具有特定特征的值的集合。例如，一个只包含数字的集合可以表示为数字类型 number。以此类推，一个只包含字符串的集合可以表示为字符串类型 string。

交叉类型：集合论中的交集

交叉类型表示两个或多个类型的交集。换句话说，交叉类型只包含同时属于这两个或多个类型的元素。在集合论中，交叉集由符号“∩”表示。

在 TypeScript 中，交叉类型使用符号“&”表示。例如，以下交叉类型定义了一个同时具有数字和布尔值特征的新类型：

type NumericBoolean = number & boolean;

联合类型：集合论中的并集

联合类型表示两个或多个类型的并集。换句话说，联合类型包含属于任何一个类型的元素。在集合论中，并集由符号“∪”表示。

在 TypeScript 中，联合类型使用符号“|”表示。例如，以下联合类型定义了一个可以是数字或字符串的新类型：

type NumericOrString = number | string;

示例：交叉类型和联合类型在实践中

交叉类型和联合类型在 TypeScript 开发中非常有用。例如，我们可以使用交叉类型来定义一个具有特定属性的函数，这些属性来自两个不同的类型。

interface HasName {
  name: string;
}

interface HasAge {
  age: number;
}

function printInfo(person: HasName & HasAge) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这里，函数 printInfo 接受一个同时具有 name 和 age 属性的对象。

联合类型也可以用来定义接受多种类型参数的函数。例如，我们可以使用联合类型来定义一个函数，该函数可以接受数字或字符串。

function addOrConcat(a: number | string, b: number | string) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  } else {
    return a.toString() + b.toString();
  }
}