TypeScript 中用判别联合类型替代 instanceof 检查

写 TypeScript 的人都遇到过这种代码:函数接受多种形态的对象,分支里用 instanceof'foo' in obj 来判断当前是哪一种。这种写法能跑,但类型推导很多时候不到位,重构时也容易遗漏分支。换成判别联合类型(discriminated union)之后整个世界都清爽了。

一个具体例子

假设我们在写一个 HTTP 客户端,请求结果有三种:成功、业务错误(HTTP 200 但 body 里 code 非 0)、网络错误。早期版本可能长这样:

typescript 复制代码
interface Result {
  data?: unknown
  bizError?: { code: number; message: string }
  networkError?: Error
}

function handle(r: Result) {
  if (r.networkError) {
    console.error('network down', r.networkError)
  } else if (r.bizError) {
    console.warn('biz error', r.bizError.code)
  } else {
    console.log('ok', r.data)
  }
}

问题:

  1. 三个字段都是可选的,调用方能构造出 { data: ..., networkError: ... } 这种自相矛盾的对象
  2. else 分支里 TypeScript 并不能保证 r.data 一定存在
  3. 加一种新的结果类型时,编译器不会提醒所有 handle 函数有遗漏

用判别字段重写

typescript 复制代码
type Result =
  | { kind: 'ok'; data: unknown }
  | { kind: 'bizError'; code: number; message: string }
  | { kind: 'networkError'; cause: Error }

function handle(r: Result) {
  switch (r.kind) {
    case 'ok':
      console.log('ok', r.data)
      return
    case 'bizError':
      console.warn('biz error', r.code)
      return
    case 'networkError':
      console.error('network down', r.cause)
      return
  }
}

每个分支里 TypeScript 自动收窄类型:在 case 'ok' 里访问 r.code 会直接报错。三种状态互斥,不可能同时存在。

加上 exhaustiveness check

更进一步,可以加一个 assertNever 让编译器在你忘记处理新分支时直接报错:

typescript 复制代码
function assertNever(x: never): never {
  throw new Error(`Unhandled variant: ${JSON.stringify(x)}`)
}

function handle(r: Result) {
  switch (r.kind) {
    case 'ok': return console.log('ok', r.data)
    case 'bizError': return console.warn('biz error', r.code)
    case 'networkError': return console.error('network down', r.cause)
    default: return assertNever(r)
  }
}

后面如果在 Result 里加了一个 { kind: 'timeout'; afterMs: number },所有 handle 函数会立刻在 assertNever(r) 那行编译错误,因为 r 的类型不再是 never。这个模式在大型代码库里非常救命,相当于给类型系统挂了一个"穷尽性"的开关。

什么时候不适合

判别联合不是免费的:

  • 如果各个变体之间共享字段很多,用判别字段会有重复
  • 如果变体集合是开放的(比如允许第三方扩展),用 class + 接口可能更合适
  • 跨模块边界传输时(JSON、protobuf)要确认 kind 字段在序列化协议里也能保留

但只要你的"几种状态"是闭集合,判别联合几乎总是比 instanceof 或可选字段更好的选择。

相关推荐
ZC跨境爬虫3 小时前
海南大学交友平台开发实战 day9(头像上传存入 SQLite+BLOB 存储 + 前后端联调避坑全记录)
前端·数据库·python·sqlite
落魄江湖行3 小时前
基础篇六 Nuxt4 状态管理:useState 的正确用法
前端·vue.js·typescript·nuxt4
jerrywus3 小时前
手机控制 AI 编程?Paseo 让你随时随地跑 Claude Code / Codex
前端·agent·claude
comerzhang6553 小时前
16÷4 陷阱:一行代码让 SharedArrayBuffer 数据全部错位
javascript
GISer_Jing3 小时前
前端视频技术全解析:从编解码到渲染优化
前端·音视频·状态模式
LIO4 小时前
Vue3 + Pinia 完整使用教程(企业级)
前端·vue.js
军军君014 小时前
数字孪生监控大屏实战模板:智慧城市大屏
前端·vue.js·typescript·前端框架·echarts·智慧城市·大屏展示
CDN3604 小时前
高防切换后网站打不开?DNS 解析与回源路径故障排查
前端·网络·数据库
信也科技布道师4 小时前
把7个页面变成1段对话:AI如何重构借款流程
前端·人工智能·重构·架构·交互·用户体验