一文读懂 TS 中联合类型和交叉类型各自的含义

在 TypeScript 中，联合类型和交叉类型是两种非常重要的概念。它们可以帮助我们更好地描述类型，提高代码的清晰度和健壮性。接下来我们将详细讲解这两种类型的含义和用法。

联合类型

联合类型（Union Types）表示一个值可以是多种类型中的一种。用 | 符号连接多个类型，表示这些类型是可选的，例如：

let val: string | number;
val = 'hello'; // 正确
val = 123; // 也正确
val = true; // 错误，布尔值不是 string 或 number

上面的代码定义了一个变量 val，它可以是 string 或 number 类型。这样的类型声明可以在很多场景下帮我们描述变量的类型范围，例如文字常量或者字符串类型。

用在函数中

联合类型也可以用在函数中，表示函数的参数或返回值可以是多种类型中的一种，例如：

function fn(val: string | number): void {
  console.log(val.toFixed(2)); // 错误，因为 val 不一定是 number 类型
  console.log(val.substr(1)); // 错误，因为 val 不一定是 string 类型
  console.log(String(val).substr(1)); // 正确，把 val 转换为 string 类型后再调用 substr
}

fn('hello'); // 正确
fn(123); // 也正确
fn(true); // 错误，布尔值不是 string 或 number

上面的代码定义了一个函数 fn，它的参数 val 可以是 string 或 number 类型。由于 val 不确定是哪种类型，我们不能直接使用它的字符串或数值操作方法，需要先进行类型转换。

用在类型保护中

当我们使用联合类型时，编译器无法确定一个变量到底是哪种类型，我们需要使用类型保护（Type Guards）来明确变量的类型。例如：

function process(val: string | number): string {
  if (typeof val === 'string') {
    return val.toUpperCase();
  } else if (typeof val === 'number') {
    return val.toFixed(2);
  }
  throw new Error('unsupported type');
}

console.log(process('hello')); // 输出 'HELLO'
console.log(process(3.1415926)); // 输出 '3.14'
console.log(process(true)); // 抛出错误，因为布尔值不是 string 或 number

上面的代码定义了一个函数 process，它的参数 val 可以是 string 或 number 类型。在函数实现中，我们使用 typeof 来判断 val 的类型，然后分别处理。这样我们就可以安全地使用字符串和数值操作方法了。

交叉类型

交叉类型（Intersection Types）表示一个值需要同时属于多个类型。用 & 符号连接多个类型，表示这些类型是必须同时满足的，例如：

interface Person {
  name: string;
  age: number;
}

interface Employee {
  company: string;
  salary: number;
}

type Worker = Person & Employee;

const worker: Worker = {
  name: 'John',
  age: 30,
  company: 'ABC Inc.',
  salary: 5000
};

上面的代码定义了两个接口 Person 和 Employee，它们分别表示一个人和一个员工。然后我们定义了一个类型 Worker，表示同时具有 Person 和 Employee 的特性。

在定义变量 worker 时，我们可以看到它同时包含了 Person 和 Employee 的所有属性，这样我们就可以方便地使用这个变量了。

用在类型合并中

交叉类型不仅可以用于定义变量，还可以用于合并类型。例如：

interface A {
  a: number;
}

interface B {
  b: string;
}

interface C {
  c: boolean;
}

type ABC = A & B & C;

const abc: ABC = {
  a: 123,
  b: 'hello',
  c: true
};

上面的代码定义了三个接口 A、B 和 C，它们分别表示三种不同的特性。然后我们定义了一个类型 ABC，表示同时具有三种特性的对象。

在定义变量 abc 时，我们可以看到它同时包含了 A、B 和 C 的所有属性，这样就可以方便地使用这个变量了。交叉类型在对类型进行合并时非常方便，我们可以将多个接口组合成一个单一的接口，从而达到代码重用的目的。