TypeScript：解构字段类型守卫传递问题及联合类型解决方案

当解构一个返回联合类型的函数结果后，使用其中一个字段做类型守卫时，TypeScript无法自动关联推断另一个字段的类型，比如以下场景：

function fn() {
  if (Math.random() > 0.5) return { fail: true }
  return { val: 5 }
}

function fn2() {
  const { fail, val } = fn()
  if (fail) return
  // 'val' is possibly undefined
  return val + 5 // vs: val! + 5
}

这里TypeScript会提示val可能为undefined，即便我们已经通过if (fail) return排除了失败分支。

解决方案：手动定义精确联合类型 #

通过手动创建包含互斥字段的联合类型，明确两个分支的互斥关系，让TypeScript能够正确识别类型守卫后的字段类型，代码如下：

type T = {
  fail: true
  val?: never
} | {
  fail?: never
  val: number
}

function fn(): T {
  if (Math.random() > 0.5) return { fail: true }
  return { val: 5 }
}

function fn2() {
  const { fail, val } = fn()
  if (fail) return
  return val + 5
}

该定义明确了：当fail为true时val不存在，当val存在时fail不存在，TypeScript就能正确推断出在排除fail分支后val一定是number类型。

内容的提问来源于stack exchange，提问作者Sean