一文读懂 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 的所有属性，这样就可以方便地使用这个变量了。交叉类型在对类型进行合并时非常方便，我们可以将多个接口组合成一个单一的接口，从而达到代码重用的目的。

总结

联合类型和交叉类型是 TypeScript 中非常重要的概念，它们分别用来表示一个值可以是多种类型中的一种和一个值需要同时属于多个类型。这两个类型可以很好地描述变量的类型范围和属性需求，将它们组合使用可以使代码更加清晰健壮。