02.02 Typescript“可选链”——拯救你的代码

TypeScript 3.7 实现了呼声最高的 ECMAScript 功能之一:可选链(Optional Chaining)!

那么什么是可选链呢?简单的说: 可选链的核心是 ?. 运算符,用于可选的属性访问。


直接看代码

<code># 以前我们写东西是这样的,三层属性足够我们写出一条裹脚布~

const street = user && user.address && user.address.street;

# 以后我们写东西是这样的,代码少,可读性好
const street = user?.address?.street/<code>

当然新语法使用的时候有个坑一定要注意

你希望如果 response 或者 response.settings 或者 response.settings.n 不存在(值为 null 或者 undefined)时,result 保底值为 100。

<code>const result = response?.settings?.n || 100/<code>

但是上面代码在 n 为 0 的时候,也会让 result 变成 100,你实际上希望此时 result 为 0。

这个时候你就需要使用双 ?? 来实现了。

<code>const result = response?.settings?.n ?? 100/<code>

当然可选链是ECMAScript的提案,js和nodejs在不久的将来应该都会加入对其的支持,不想等的话,可以使用babel的plugin-proposal-optional-chaining来支持。

以后们的口号就是用,问号来解决问题哈哈


Typescript“可选链”——拯救你的代码


分享到:


相關文章: