TypeScript中判断可选链取值后state.foo仍可能为null的原因咨询

问题原因 #

TypeScript的类型缩小仅支持对直接检查的目标做类型收窄，不会跨变量做关联推导：
你将state.foo?.bar的结果赋值给独立变量bar后，TS不会基于bar的真值检查结果，反向推导state.foo的类型。因为从TS的分析逻辑来看，bar和state.foo是两个独立的变量，无法保证赋值bar之后、检查bar之前，state.foo有没有被其他逻辑修改，所以不会做这种间接的类型推断。

额外说明：你当前的写法逻辑上也存在漏洞：bar是number类型，0、NaN都属于falsy值，如果state.foo存在但bar为0/NaN，也会触发提前返回，这种场景下你也没法通过bar的状态完全反推state.foo的状态。

解决方案 #

如果需要让TS正确识别state.foo不为空，直接对state.foo本身做判空检查即可：

type State = {
  foo: Foo | null
}

type Foo = {
  bar: number
}

function A (state: State) {
  // 直接对state.foo做检查，TS会正确收窄它的类型
  if (!state.foo) return 
  const bar = state.foo.bar
  if (!bar) return 
  // 此时state.foo的类型已经被缩小为Foo，不会再出现null的情况
  state.foo 
}

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