如何处理TypeScript中嵌套对象可能为undefined的报错？

错误原因 #

直接调用appleObj.map()报错的核心问题是：普通JavaScript/TypeScript对象没有map方法——map是数组的专属方法，因此appleObj.map的值为undefined，调用它自然会触发这个TypeScript错误。

解决方法 #

要遍历对象内的苹果数据，需先将对象的值提取为数组，再使用map或其他数组遍历方法。可以通过Object.values()方法实现这一点：

修正后的代码 #

type Apple = {
  color: string
  size: string
}
type Apples = {
  [x: string]: Apple
}

const appleObj: Apples = {
  1: {
    color: "red",
    size: "small",
  },
  2: {
    color: "green",
    size: "large",
  },
}

// 提取对象的值为数组后再遍历
Object.values(appleObj).map(({ color, size }) => {
  console.log(color, size)
})

额外说明 #

• Object.values(appleObj)会返回Apple[]类型的数组，TypeScript可自动推导该类型，遍历过程中能正确识别color和size的类型。
• 类型命名建议首字母大写（比如Apple而非apple），这是TypeScript通用规范，能有效区分类型与变量名。

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