TypeScript无法识别await回调中赋值的变量是什么原因？

问题原因 #

这是TypeScript静态控制流分析的固有局限性导致的：

• TypeScript的类型检查在编译时执行，无法预判异步回调的执行时机与执行结果，默认不会将异步回调内部对外部变量的赋值纳入后续的类型收缩逻辑。
• 你代码中的x赋值操作写在Promise的回调内部，TS无法确定该回调一定会在await之后执行完毕（尽管实际逻辑里确实是这样），因此在await后的代码中，仍然判定x的类型为number | undefined，没有收缩为确定的number类型。

解决方案 #

以下方案按推荐优先级排序：

1. 直接接收Promise的返回值（最优，无类型隐患）
   你在Promise中已经通过res(x)返回了赋值后的结果，直接用变量接收await的返回值即可，TS可以正确推断返回值类型：

async function test() {
  const x = await new Promise<number>(res => {
    const innerX = 1
    res(innerX)
  })
  // 此时x的类型直接被推断为number，无需额外的空值判断
  console.log(x)
}

如果需要保留原有变量的声明逻辑，也可以直接给原有变量赋值：

async function test() {
  let x: number | undefined = undefined
  x = await new Promise<number>(res => {
    x = 1
    res(x)
  })
  if (x) {
    console.log(x)
  }
}

2. 使用非空断言（适合100%确定x已被赋值的场景）
   如果你不想修改现有逻辑，可以在使用x的时候添加!非空断言，手动告诉TS你确认x此时一定不是undefined：

async function test() {
  let x:number | undefined = undefined
  await new Promise(res => {
    x = 1
    res(x)
  })
  if (x) {
    console.log(x!)
  }
}

3. 显式标注Promise泛型
   如果是TS版本较旧无法正确推断Promise返回类型的情况，给Promise构造函数加上泛型标注也可以辅助TS做类型收缩：

async function test() {
  let x:number | undefined = undefined
  // 显式标注Promise返回值为number
  await new Promise<number>(res => {
    x = 1
    res(x)
  })
  if (x) {
    console.log(x)
  }
}

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