如何解决TypeScript无法识别已判断存在的对象可选属性问题？

问题场景 #

定义如下类型与函数后，即使通过if判断了可选属性存在，访问属性的子值时仍会触发类型错误：

type OuterKeys = 'a' | 'b';

type Inner = {
    value: '';
}

type Outer = Partial<Record<OuterKeys, Inner>>;

const thisGivesError = (key: OuterKeys, outer: Outer) => {
    if (outer[key]) {
        console.log(outer[key].value); // 报错：Object is possibly 'undefined'
    }
}

原因分析 #

TypeScript的类型守卫对动态属性的重复访问存在跟踪局限：两次调用outer[key]时，编译器无法确保这两次访问的是同一个不可变的值（哪怕对象是const声明，其类型Outer仍允许属性被修改），因此无法将第二次访问的outer[key]类型缩小为Inner。

解决方案 #

将outer[key]赋值给单独变量，让类型守卫能跟踪该变量的类型变化，这是最规范且安全的处理方式：

const thisWorks = (key: OuterKeys, outer: Outer) => {
    const o = outer[key];
    if (o) {
      console.log(o.value); // 无类型错误
    }    
}

把属性值存入变量后，TypeScript能明确识别if (o)判断后o的类型已被缩小为Inner，因此可以安全访问子属性。

不推荐的替代方案说明 #

• 非空断言!：outer[key]!.value虽能消除报错，但本质是强制绕过类型检查，若后续逻辑变化导致属性不存在，会引发运行时错误，属于不严谨的权宜之计。
• 可选链?.：outer[key]?.value不会报错，但既然已经通过if确认属性存在，使用可选链完全多余，不符合代码逻辑的严谨性。

内容的提问来源于stack exchange，提问作者jedrzej.kurylo