写点什么

在 TypeScript 处理空值异常

用户头像
寇云
关注
发布于: 2020 年 05 月 07 日
在 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


发布于: 2020 年 05 月 07 日阅读数: 66
用户头像

寇云

关注

前端工程师,远程工作者 2012.06.12 加入

还未添加个人简介

评论

发布
暂无评论
在 TypeScript 处理空值异常