项目如何接入可选链？

提示：项目如果支持 TypeScript 的可以忽略本文章， TypeScript V3.7 版本以上支持可选链操作。

什么是可选链？（optional-chaining）

     可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

    当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

const object = {
    prop1: {
        prop2: {
            value: 'hello world'
        }
    }
};

// 不使用可选链
let str = '';
if (object && object.prop1 && object.prop1.prop2 && object.prop1.prop2.value) {
    str = obj.prop1.prop2.value;
}

// 使用可选链
let str = '';
if (object?.prop1?.prop2?.value) {
    str = object.prop1.prop2.value;
}

项目配置

安装babel

npm install --save-dev @babel/plugin-proposal-optional-chaining

// OR

yarn add @babel/plugin-proposal-optional-chaining --dev

配置plugins

配置后就可以在项目中使用了

plunins: [
    "@babel/plugin-proposal-optional-chaining"
]

更多参考

www.npmjs.com/package/@ba… github.com/tc39/propos…