类型守卫：精准确认每一处类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function format(value: string | number) {
  if (typeof value === "string") {
    // 这里 value 的类型被缩小为 string
    return value.toUpperCase()
  }
  // 这里 value 的类型被缩小为 number
  return value.toFixed(2)
}

format("hello")  // "HELLO"
format(3.1415)   // "3.14"

1
2
3
4
5
6
7

function log(value: unknown) {
  if (typeof value === "function") {
    value()  // ✅ function 类型
  } else if (typeof value === "object" && value !== null) {
    console.log(value)  // ✅ object 类型（非 null）
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function getLength(value?: string | null) {
  // value 可能是 string | undefined | null
  if (value) {
    // 这里 value 被缩小为 string（假值被排除）
    return value.length
  }
  return 0
}

function printAll(values?: string[] | null) {
  if (values && values.length > 0) {
    // 先排除 null/undefined，再取值
    for (const v of values) {
      console.log(v)
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function move(direction: "up" | "down" | "left" | "right" | null) {
  if (direction === null) {
    return  // direction 在这里是 null
  }

  if (direction === "up") {
    // direction 在这里是 "up"
  }
  // 剩下的分支："down" | "left" | "right"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

interface Fish {
  swim(): void
  finCount: number
}

interface Bird {
  fly(): void
  wingSpan: number
}

type Pet = Fish | Bird

function handlePet(pet: Pet) {
  if ("swim" in pet) {
    // 这里 pet 被缩小为 Fish
    console.log(`鱼有 ${pet.finCount} 个鳍`)
  } else {
    // 这里 pet 被缩小为 Bird
    console.log(`鸟的翼展是 ${pet.wingSpan} 米`)
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

class Dog {
  bark() { console.log("汪汪") }
}

class Cat {
  meow() { console.log("喵喵") }
}

type Pet = Dog | Cat

function makeSound(pet: Pet) {
  if (pet instanceof Dog) {
    pet.bark()   // ✅ Dog 类型
  } else {
    pet.meow()   // ✅ Cat 类型
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

type Circle = {
  kind: "circle"
  radius: number
}

type Rectangle = {
  kind: "rectangle"
  width: number
  height: number
}

type Triangle = {
  kind: "triangle"
  base: number
  height: number
}

type Shape = Circle | Rectangle | Triangle

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2
    case "rectangle":
      return shape.width * shape.height
    case "triangle":
      return (shape.base * shape.height) / 2
  }
}

1
2
3
4
5
6
7

// 获取 DOM 元素
const canvas = document.getElementById("canvas") as HTMLCanvasElement
// canvas 的类型被断言为 HTMLCanvasElement，而不是 HTMLElement | null

// 从宽类型断言为窄类型
const value: unknown = "hello"
const length = (value as string).length

1
2

const a = value as string   // JSX 中推荐
const b = <string>value     // JSX 中与标签冲突，不推荐

1
2
3

function process(id?: string) {
  console.log(id!.toUpperCase())  // 告诉编译器 id 一定存在
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

type Color = "red" | "green" | "blue"
type Palette = Record<string, Color>

const palette = {
  primary: "blue",
  secondary: "green",
  danger: "red",
} satisfies Palette

// palette.primary 的类型是 "blue"（字面量），而不是 Color
// 但 palette 整体满足 Palette 的约束

const wrongPalette = {
  primary: "blue",
  secondary: "yellow",  // ❌ "yellow" 不在 Color 中
} satisfies Palette

1
2
3
4
5
6
7

// 方式一：直接注解 —— 失去了精确的字面量类型
const p1: Palette = { primary: "blue", secondary: "green" }
p1.primary  // 类型为 Color（"red" | "green" | "blue"），不是 "blue"

// 方式二：satisfies —— 既验证，又保留精确类型
const p2 = { primary: "blue", secondary: "green" } satisfies Palette
p2.primary  // 类型为 "blue"（精确字面量）