使用匿名函数时TypeScript的Type Guard失效问题及解决方法

你猜的没错，TypeScript之所以在forEach回调里还提示foo.a可能为undefined，核心原因是回调函数的执行时机无法被TypeScript完全掌控，它无法保证在回调运行前，外部的foo.a不会被修改。就像你示例里写的那样，如果在forEach之后把foo.a设为undefined，当回调最终执行时，foo.a确实已经是undefined了，TypeScript的类型检查会考虑这种潜在的风险。

下面是几种实用的解决方式：

1. 把foo.a赋值给局部变量 #

将已确认存在的foo.a存到一个局部变量中，TypeScript能确定这个局部变量不会被外部代码修改，回调里直接使用这个变量即可：

type Foo = {
  a?: Record<string, number>; 
}

function processFoo(foo: Foo){
  const target = foo.a;
  if (target){ 
    console.log(target); 
    Object.keys(target).forEach((key) => {
        target[key]; // 此处无类型错误
    })
  }
}

2. 使用可选链操作符 #

这是最简洁的写法，用可选链?.直接处理潜在的undefined情况：

type Foo = {
  a?: Record<string, number>; 
}

function processFoo(foo: Foo){
  if (foo.a){ 
    console.log(foo.a); 
    Object.keys(foo.a).forEach((key) => {
        foo.a?.[key]; // 可选链自动处理undefined场景
    })
  }
}

3. 使用类型断言（谨慎使用） #

如果你能100%确认回调执行时foo.a不会被修改，可以用类型断言强制告诉TypeScript它不存在undefined的可能：

type Foo = {
  a?: Record<string, number>; 
}

function processFoo(foo: Foo){
  if (foo.a){ 
    console.log(foo.a); 
    Object.keys(foo.a).forEach((key) => {
        (foo.a as Record<string, number>)[key]; // 类型断言
    })
  }
}

注意：这种方式跳过了TypeScript的类型检查，后续如果代码逻辑变动导致foo.a被修改，可能会引发运行时错误。

4. 改用for...of循环 #

如果场景允许，用for...of替代forEach，因为for...of是同步执行的，TypeScript能保持类型守卫的效果：

type Foo = {
  a?: Record<string, number>; 
}

function processFoo(foo: Foo){
  if (foo.a){ 
    console.log(foo.a); 
    for (const key of Object.keys(foo.a)) {
        foo.a[key]; // 此处无类型错误
    }
  }
}

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