非常有热情写点说明但是，自己一直都不敢开始。有时候不知道写什么？有时候写点东西怕露怯，你都工作 8 ～ 9 年了还写这么 low 的东西。读了如何消除写作过程中的痛苦，让写作变成一种享受 收到鼓舞。决定把工作遇到的问题及时记录下来。嗯，我不是个开拓者，我只是个记录者。
起因
一段时间观察线上监控（目前我们公司的用的是 Sentry），发现大部分错误是
TypeError: Cannot read property 'xxx' of undefined
发生这样的错误，原因其中有 2 条经常碰到：
- 编写代码的时候，不注意边界情况，比如前后端定义数据实体字段的时候都是正常值，但是由于一方疏忽，一个数据实体返回为
null或者{} - 功能迭代的过程中，对于数据实体的结构发生变更，忽略了一些代码，比如：定义
Staff字段为Staff: { Department: {...}}, 迭代之后Department改成了Id参照，即Staff: {Department: xxxxxxxx}
这两种情况在业务迅速迭代的情况下非常常见。
TS 之前的解决方案
原生 js 的解决方案：
if (Staff && Staff.Department && Staff.Department.Name) {
// your code here
}
除了上面 👆 的方法 lodash 提供了 get 方法来解决这个问题，get 方法的定义：
Gets the value at
pathofobject. If the resolved value isundefined, thedefaultValueis returned in its place.
根据 object 对象的 path 路径获取值。如果解析值是 undefined，就返回一个默认的值(defaultValue)
使用 get 方法上面的代码可以简化成
_.get(Staff, `Staff.Department.Name`, "DefaultName");
详细讲解请移步 ➡️ ：lodash 的 get 方法
TS 的「可选链」 与 「空值合并」
TypeScript 3.7 推出了两个新语言特性 可选链（Optional Chaining）和 空值合并运算符（nullish coalescing operator）更优雅地解决了这个问题。
那么什么是可选链呢？从本质上讲，有了可选链后，我们编写代码时如果遇到 null 或 undefined 就可以立即停止某些表达式的运行。可选链的核心是新的 ?. 运算符，用于可选的属性访问。代码可以成
if(Staff?.Department?.Name){
// your code here
}
那么?.是否等价 &&? 答案是否定的，&& 还包含了被强制转换成布尔值的情况（例如空字符串、0、NaN 和 false）
可选链的常用方式
语法
可选链的三种「姿势」
obj?.prop // Property access
obj?.[expr] // Optional element access
func?.(...args) // Optional function or method call
用一个例子说明如何使用
type UserResponse = {
firstName: string
lastName: string
age: number
occupation?: string
jobHistory?: {
firstJob?: string
},
favoriteFoods?: string[]
}
const user: UserResponse;
// without optional chaining 🤢
const userOccupation = user && user.occupation;
// with optional chaining ❤️
const userOccupation = user?.occupation;
const userOccupation = user?.["occupation"];
// or
const favFood = user?.favoriteFoods?.[0];
第三种情况：可选函数或方法调用
可选链式也可以用在函数调用中。当你需要在运行时有条件地调用一个函数时，它们就会派上用场，即只有在函数存在的情况下才会调用它。这可以这样实现。
const callFakeApi = async (url: string, log?: (user: object) => void ) => {
const response = await fetch(url);
const data = await response.json();
log?.(data);
}
callFakeApi('https://jsonplaceholder.typicode.com/todos/1', console.log);
空值合并
空值合并（Nullish Coalescing） 是 TypeScript 3.7 中的另一个新特性，它与 Optional Chaining 密切相关。它使用一个独特的操作符：??，当一个表达式返回为 null 或 undefined时，它作为默认值或 "回落"值。
使用方法：
// null value
null || 20 // returns 20
null ?? 20 // returns 20
// undefined value
undefined || 20 // returns 20
undefined ?? 20 // returns 20
// boolean
true ?? 10 // returns true
false ?? 10 // returns false
// NaN
NaN ?? 20 // returns NaN
// empty string
'' ?? 5 // returns ''
特别注意和常用的||区别：?? 只对null 和 undefined 生效，但是 || 对强制转换成布尔值都有效。用一个场景说明：下面这段代码片段尝试从 localStorage 中读取上次存储的值（如果有的话）；然而，因为使用了 ||，它是有 bug 的：
unction initializeAudio() {
let volume = localStorage.volume || 0.5;
// ...
}
当 localStorage.volume 被设成 0 时，volume 变量将被设成 0.5，这显然不是我们想要的结果。?? 避免了一些因假值（例如 0，NaN 以及 ""）引起的一些预料之外的行为。
