Typescript访问含两种可选子属性的对象时报Object is possibly 'undefined'如何解决

错误原因 #

你的Names类型中name和names都是可选属性，仅用hasOwnProperty('name')判断name不存在，无法保证names属性一定存在，也无法保证names数组有值，所以TS会提示names可能为undefined，访问索引0就会触发2532报错。

解决方案 #

1. 可选链+空值合并运算符（最推荐） #

直接用TS原生支持的可选链?.访问可能为空的属性，再用??设置兜底默认值，不需要额外写属性存在判断：

const name = data[dataLength - 1].name ?? data[dataLength - 1].names?.[0] ?? '自定义兜底值'

??会自动识别name为undefined/null的场景，再尝试取names的第一个元素，如果两者都为空就返回你设置的兜底值。

2. 补充类型收窄判断 #

如果你不需要兜底默认值，可以手动加多层判断让TS识别属性类型：

const lastItem = data[dataLength - 1]
let name: string
if (lastItem.name) {
  name = lastItem.name
} else if (lastItem.names?.length) {
  name = lastItem.names[0]
} else {
  // 可自定义处理两种属性都不存在的场景，比如抛出业务错误
  name = ''
}

这种写法TS可以自动识别每个分支内的属性类型，不会报空值错误，逻辑健壮性更高。

3. 非空断言（仅适用于你100%确定返回符合预期的场景） #

如果你能保证只要name不存在，names一定存在且至少有一个元素，可以用!强制告诉TS该值不为空：

const name = data[dataLength - 1].hasOwnProperty('name') ? data[dataLength - 1].name : data[dataLength - 1].names![0]

注意该方式跳过了TS的空值校验，如果实际运行时names为空会直接抛出JS运行时错误，不建议常规场景使用。

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