TypeScript 类型缩小实战：四种核心类型保护详解

理解类型缩小

类型缩小（Type Narrowing）是指 TypeScript 编译器根据代码的执行路径，对声明时较宽泛的类型进行缩小的过程。例如，将一个联合类型(string | number)的变量，在特定的条件分支下确定为单一的 string 或 number 类型。触发这种行为的语句被称为类型保护（Type Guards），是编写健壮 TS 代码的关键。

常用类型保护：typeof

typeof 是最基础也最常用的类型保护方式，主要用于区分字符串、数字、布尔值等基本数据类型。

以下函数接收一个可能是字符串也可能是数字的 ID。当传入 string 类型时调用 toUpperCase()，其他情况直接输出：

function printID(id: string|number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase())
  } else {
    // 此时 TypeScript 识别 id 必定为 number 类型
    console.log(id)
  }
}

printID(123)
printID("aaa")

在这个分支判断中，进入第一个 if 块内的 id 被缩小为 string，而 else 块中的 id 则缩小为 number。

常见类型保护：平等缩小

通过相等运算符（如 ===, !==, ==, !=）或者 switch-case 结构，可以实现基于字面量（Literal Types）的类型缩小。

以下示例使用 switch 对方向枚举进行精确匹配：

type Direction = "left" | "right" | "top" | "bottom"

function printDirection(direction: Direction) {
  switch (direction) {
    case "left":
      console.log("向左")
      break
    case "right":
      console.log("向右")
      break
    case "top":
      console.log("向上")
      break
    case "bottom":
      console.log("向下")
      break
    default:
      console.log("未知方向")
  }
}

在 TypeScript 看来，switch 内部的每一个 case 都会缩小 direction 的具体指向。

常见类型保护：instanceof

instanceof 用于检查一个对象是否为某个构造函数（类）的实例。它在处理 DOM 元素、Error 对象或其他复杂对象类型时非常有效。

场景一：Date 对象识别

function printTime(time: string|Date) {
  if (time instanceof Date) {
    console.log(time.toUTCString())
  } else {
    console.log(time)
  }
}

场景二：自定义类实例判断

class Teacher {
  working() { console.log("正在工作") }
}
class Student {
  studying() { console.log("正在学习") }
}

function work(p: Student | Teacher) {
  if (p instanceof Teacher) {
    p.working()
  } else {
    p.studying()
  }
}

work(new Student())
work(new Teacher())

常见类型保护：in

当两个类的类型完全不同且无法通过继承关系关联时，可以利用 in 运算符检测属性是否存在，以此作为判别依据。

type Dog = { running: () => void }
type Fish = { swimming: () => void }

function walk(animal: Dog|Fish) {
  if ("swimming" in animal) {
    animal.swimming()
  } else {
    animal.running()
  }
}

const dog: Dog = { running() { console.log("狗是跑的") } }
const fish: Fish = { swimming() { console.log("鱼是游的") } }

walk(dog)
walk(fish)

上述代码中，如果 animal 包含 swimming 属性，类型就被缩小为 Fish；否则为 Dog。

总结

类型缩小是 TypeScript 静态分析的精髓之一。合理使用 typeof、instanceof、in 以及相等判断，可以消除编译错误并让 IDE 提供精准的代码补全。以上就是关于 TypeScript 类型缩小与类型保护的详细内容，更多关于 TypeScript 开发技巧的资料请关注本站其它相关文章！