在 TypeScript 处理空值异常

非常有热情写点说明但是，自己一直都不敢开始。有时候不知道写什么？有时候写点东西怕露怯，你都工作 8 ～ 9 年了还写这么 low 的东西。读了如何消除写作过程中的痛苦，让写作变成一种享受 受到鼓舞。决定把工作遇到的问题及时记录下来。嗯，我不是个开拓者，我只是个记录者。

起因

一段时间观察线上监控（目前我们公司的用的是 Sentry），发现大部分错误是

TypeError: Cannot read property 'xxx' of undefined

发生这样的错误，原因其中有 2 条经常碰到：

1. 编写代码的时候，不注意边界情况，比如前后端定义数据实体字段的时候都是正常值，但是由于一方疏忽，一个数据实体返回为 null 或者 {}
   

2. 功能迭代的过程中，对于数据实体的结构发生变更，忽略了一些代码，比如：定义 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 path of object. If the resolved value is undefined, the defaultValue is 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 accessobj?.[expr]     // Optional element accessfunc?.(...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"];// orconst 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 valuenull || 20 // returns 20null ?? 20 // returns 20
// undefined valueundefined || 20 // returns 20undefined ?? 20 // returns 20
// booleantrue ?? 10 // returns truefalse ?? 10 // returns false
// NaNNaN ?? 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 以及 ""）引起的一些预料之外的行为。

参考资料

1. lodash 的 get 方法
   

2. Optional Chaining and Nullish Coalescing in TypeScript
   

3. Typescript Optional Chaining