08 · 联合、交叉与类型守卫

NOTE
JS 运行时值是动态的，TS 靠”类型收窄”在代码流里逐步把宽泛类型变精确。本篇讲清所有收窄手段，尤其是可辨识联合这一实战神器。

1. 联合类型#

一个值可以是多种类型之一：

1
let id: number | string;
2
id = 1;
3
id = "a1";

联合让 API 更灵活（如 id 既接受数字也接受字符串）。但访问联合的共有成员才安全，专有成员需先收窄。

2. 字面量联合#

1
type Status = "idle" | "loading" | "success" | "error";
2
let s: Status = "loading";
3
s = "done"; // ❌ 不在联合内

字面量联合是最常用的”枚举替代”，零运行时开销。

3. 类型收窄 narrowing#

TS 在 if/三元等控制流里会自动收窄联合：

1
function format(value: number | string): string {
2
  if (typeof value === "string") {
3
    return value.trim(); // 这里 value 被收窄为 string
4
  }
5
  return value.toFixed(2); // 这里收窄为 number
6
}

4. 收窄手段一览#

手段	适用
`typeof x === "string"`	原始类型
`x instanceof Foo`	类实例
`key in x`	对象是否含某键
`x === 字面量`	字面量联合
自定义守卫 `is`	任意复杂判断
可辨识联合的 `switch`	带 `kind` 的联合

in 示例：

1
type A = { a: number };
2
type B = { b: string };
3
function f(x: A | B): void {
4
  if ("a" in x) x.a; // A
5
  else x.b;          // B
6
}

5. 可辨识联合 discriminated union#

给联合每个成员加一个共同的字面量字段（kind/type），即可用 switch 安全分派：

1
type Shape =
2
  | { kind: "circle"; r: number }
3
  | { kind: "rect"; w: number; h: number };
4

5
function area(s: Shape): number {
6
  switch (s.kind) {
7
    case "circle": return Math.PI * s.r ** 2; // s 收窄为 circle
8
    case "rect":   return s.w * s.h;          // s 收窄为 rect
9
    default:
10
      // 穷尽性检查：若漏 case，这里 s 是 never，会编译报错
11
      const _exhaustive: never = s;
12
      return _exhaustive;
13
  }
14
}

never 穷尽检查是杀手锏：以后新增 kind，忘了加 case，编译期立刻报错，不会漏处理。

6. 自定义类型守卫 is#

判断逻辑复杂时，用 is 抽成守卫函数：

1
function isFish(x: Fish | Bird): x is Fish {
2
  return (x as Fish).swim !== undefined;
3
}
4
function move(x: Fish | Bird): void {
5
  if (isFish(x)) x.swim(); // 收窄为 Fish
6
  else x.fly();
7
}

x is Fish 告诉 TS：“这个函数返回 true 时，x 就是 Fish”，从而在调用处自动收窄。

7. 断言 as 与非空 !#

⚠️ 这两是”我比编译器更懂”的逃生舱，慎用：

1
const el = document.getElementById("app") as HTMLDivElement; // 断言类型
2
const len = (el as any).length;                              // 双断言链，危险
3

4
function f(x: string | null): number {
5
  return x!.length; // 非空断言：你保证 x 非 null，否则运行时炸
6
}

规则：

优先用收窄，别用 as。
必须断言时，用 as 一步到位，避免 as any as X。
! 只在你确定非空时用，否则把运行时错误藏起来。

小结#

联合 A | B 与字面量联合是灵活 API 的基础。
收窄手段：typeof/instanceof/in/===/自定义 is/可辨识联合。
可辨识联合 + never 穷尽检查 = 漏 case 编译期报错。
as/! 是逃生舱，能收窄就别断言。

练习#

定义可辨识联合 type Resp = { ok: true; data: string } | { ok: false; error: string }，写 handle(r: Resp) 用 switch。
给上题加 never 穷尽检查，然后新增一个 ok 变体看是否报错。
写 isString(x: unknown): x is string 守卫函数，并在 format 里用它收窄。
解释 as any 为什么危险，什么场景才该用 as。