TypeScript安全访问多层嵌套属性 防undefined报错并设置默认值

TypeScript 3.7及以上版本可以直接用原生的可选链操作符+空值合并操作符实现需求，不需要手写多层嵌套判断：

const a = reply?.['price']?.['value']?.['total']?.['value'] ?? 0;

语法说明 #

• 可选链操作符?.：会在访问每一级属性前先校验左侧对象是否为null/undefined，如果是就直接短路返回undefined，不会继续向后访问属性，从根源上避免属性访问抛出异常。
• 空值合并操作符??：会判断左侧返回值是否为null/undefined，如果是就返回右侧设置的默认值0，否则返回链路最终取到的有效值。

注意：不要用逻辑或||替代??。||会把所有假值（包括合法的0、false、空字符串）都判定为需要返回默认值，当链路最终的value本身合法值就是0时会出现逻辑错误；??仅在值严格为null/undefined时才触发默认值，逻辑更严谨。

旧版本兼容写法 #

如果你的项目使用的TypeScript版本低于3.7，不支持上述新语法，可以用逐层逻辑与判断做兜底：

const a = reply 
  && reply['price'] 
  && reply['price']['value'] 
  && reply['price']['value']['total'] 
  && reply['price']['value']['total']['value'] 
  ?? 0;

这种写法逻辑和可选链一致，只是代码冗余度更高，优先推荐升级TS版本使用原生语法。

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