Typescript可辨识联合类型收窄失效，访问属性报错问题排查

你提前对函数返回的联合类型对象做了结构拆分，把isReady和data拆成了两个独立的变量。TypeScript 的类型收窄逻辑无法对两个无关联的独立变量做类型绑定，你判断isReady === 'yes'的逻辑，只能收窄isReady本身的类型，不会同步关联到data的类型，所以data在分支里还是被识别为联合类型{ a: number } | false，自然找不到a属性。

方案1：不提前解构，直接用返回对象做判断 #

直接基于完整的返回对象做判别字段校验，TypeScript 可以正常识别联合类型的分支：

const res = myFunction()
if (res.isReady === 'yes') {
  const { a } = res.data; // 不会报错，此时res.data类型被正常收窄为{ a: number }
}

方案2：自定义类型守卫（适合需要提前解构的场景） #

如果一定要提前解构，可以写类型守卫函数明确关联两个变量的类型关系：

function isReadySuccess(isReady: Return['isReady'], data: Return['data']): data is {a: number} {
  return isReady === 'yes'
}

const { isReady, data } = myFunction()
if (isReadySuccess(isReady, data)) {
  const { a } = data; // 类型正常收窄，无报错
}

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