联合与交叉类型

这一课你将能做到

1. 用联合类型 | 表达「多选一」，用交叉类型 & 表达「全都要」
2. 用字面量联合替代魔法字符串，写出精确的状态字段
3. 掌握判别联合（Discriminated Unions）建模「不同形态的数据」，这是业务开发中最实用的类型技巧

为什么要学

真实世界的数据很少是单一形状的：一个接口可能返回成功或失败两种结构；一个字段可能是 string 也可能是 number；一个组件状态可能是「加载中 / 成功 / 失败」三选一。

联合类型 | 让你精确表达「这个值是这几种类型之一」；交叉类型 & 让你把多个类型合并成一个。而判别联合是 TS 建模的灵魂——后端返回的复杂 JSON、前端的多状态 UI，用判别联合建模后，编译器能帮你在每个分支里精确推导出可用字段，写错字段名当场报错。

先建立图像

两个运算符的方向感：

联合 A | B：  「或者」——值是 A 或 B 之一（集合的并集）
              ┌─────┐   ┌─────┐
              │  A  │ ∪ │  B  │   取值范围变【宽】
              └─────┘   └─────┘   可用能力变【窄】（只有共有成员）

交叉 A & B：  「并且」——值同时满足 A 和 B（形状的叠加）
              ┌─────────────┐
              │   A 的字段   │
              │      +      │   取值范围变【窄】（要同时满足）
              │   B 的字段   │   可用能力变【宽】（字段全都有）
              └─────────────┘

记忆口诀：联合取值变宽、能力变窄；交叉取值变窄、能力变宽。

跟着做

新建 unions-demo.ts，逐步实操。

步骤 1：联合类型基础

// id 可能是数字或字符串（后端常见情况）
function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}

printId(101);     // OK
printId("abc");   // OK
// printId(true); // 报错

// 联合类型的使用限制：只能调用所有成员共有的方法
function getLength(value: string | string[]): number {
  // value.toUpperCase(); // 报错：string[] 没有这个方法
  return value.length;     // OK：string 和 string[] 都有 length
}

console.log(getLength("hello"));      // 5
console.log(getLength(["a", "b"]));   // 2

想使用某个成员特有的方法？先做类型收窄（下一课详讲）：

function format(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase(); // 这个分支里 TS 知道 value 是 string
  }
  return value.toFixed(2);      // 这里 value 是 number
}

console.log(format("hello"), format(3.14159)); // HELLO 3.14

步骤 2：字面量联合——替代魔法字符串

// 不要这样：status 是任意 string，拼错都不报错
// let status: string = "pensding"; // 笔误没人管

// 要这样：取值限定为三个字面量之一
type OrderStatus = "pending" | "paid" | "shipped" | "cancelled";

let status: OrderStatus = "pending";
status = "paid";
// status = "pensding"; // 报错：笔误当场被抓

function statusText(s: OrderStatus): string {
  switch (s) {
    case "pending":   return "待支付";
    case "paid":      return "已支付";
    case "shipped":   return "已发货";
    case "cancelled": return "已取消";
  }
}

console.log(statusText(status)); // 已支付