TypeScript中访问可选嵌套属性的最优最简解决方案是什么？

针对你提到的嵌套可选属性访问容易报错的问题，最短且符合最佳实践的解决方案就是使用TypeScript（以及ES2020+）内置的可选链操作符 ?.。

具体用法示例 #

假设你的test1是类似这样的嵌套可选类型：

interface TestType {
  a?: {
    b?: {
      c?: {
        d?: string;
        e?: number;
      };
    };
  };
}

const test1: TestType = {};

以前你可能需要写一堆冗余的判断来避免报错：

// 旧写法：繁琐且可读性差
const eValue = test1 && test1.a && test1.a.b && test1.a.b.c && test1.a.b.c.e;

现在用可选链，一行就能搞定：

// 新写法：简洁安全
const eValue = test1?.a?.b?.c?.e;

为什么这是最佳实践？ #

• 语法极简：不需要手动编写多层短路判断，代码量骤减，可读性拉满
• 安全可靠：?.会自动检查每一层属性是否为null或undefined，只要某一层不存在，就会立即返回undefined，不会抛出Cannot read property 'xxx' of undefined的错误
• 标准特性：这是TypeScript和ES标准原生支持的特性，不需要引入任何第三方库，兼容性好（现代浏览器和Node.js 14+都支持）

进阶：结合空值合并操作符给默认值 #

如果你希望当属性不存在时返回一个默认值，而不是undefined，可以搭配空值合并操作符 ??（注意不要和||混淆，??只会对null/undefined生效，不会覆盖0、''等合法的falsy值）：

// 当e不存在时返回默认值0
const eValueWithDefault = test1?.a?.b?.c?.e ?? 0;

这样就完美解决了嵌套可选属性的访问问题，既简洁又符合官方推荐的最佳实践。

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