TypeScript索引类型访问不存在键时未推断undefined，如何解决？

问题场景 #

定义了基于索引的type X，当访问不存在的键时，TypeScript没有将结果类型推断为ValueType | undefined，导致运行时出现Cannot read properties of undefined (reading 'foobar')错误。

示例代码：

type ValueType = {
    foobar:string;
}  
type X = {
  indexbased: { [id: string]: ValueType}
}

const x : X = {indexbased: {}}

const id :string = "not-existing";

const indexvalue = x.indexbased[id];
// TypeScript 推断类型为：const indexvalue: ValueType

console.log(indexvalue.foobar);
// 运行时错误：Cannot read properties of undefined (reading 'foobar') 

存在的矛盾点 #

如果直接将类型修改为type X = { indexbased: { [id: string]: ValueType|undefined} }，遍历所有条目时必须逐一检查值是否存在，否则TypeScript会报错：

for (const [key, value] of Object.entries(x.indexbased)) {
  // 此处 TypeScript 会提示 value 可能为 undefined，无法直接访问 foobar
  console.log(`${key}: ${value.foobar}`);
}

解决方法 #

方法1：使用可选链操作符（推荐） #

在访问属性时添加可选链?.，既可以避免运行时错误，也不需要修改原有类型定义：

console.log(indexvalue?.foobar); // 不存在时会输出 undefined，不会报错

方法2：先检查键是否存在再访问 #

使用hasOwnProperty确认键存在后再访问值，TypeScript会自动缩小类型范围：

if (x.indexbased.hasOwnProperty(id)) {
  const indexvalue = x.indexbased[id];
  console.log(indexvalue.foobar); // 此处 indexvalue 类型为 ValueType，无报错
}

方法3：调整类型定义并结合类型守卫 #

如果需要严格的类型约束，修改类型为包含undefined，遍历的时候用类型守卫过滤掉undefined值：

type X = { indexbased: { [id: string]: ValueType | undefined} }

for (const [key, value] of Object.entries(x.indexbased)) {
  if (value) { // 类型守卫：过滤掉 undefined
    console.log(`${key}: ${value.foobar}`);
  }
}

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