可选链与空值合并
作者:互联网
TypeScript 3.7 重要特性说明
之所以升级ts到3.7版本,是因为3.7有几个重要的特性能够提升开发效率
可选链
使用?.运算符,用于可选的属性访问
let x = foo?.bar.baz();
当定义了 foo 时,将计算 foo.bar.baz();但如果 foo 为 null 或 undefined,程序就会停止运行并只返回 undefined。以上代码等效下面的写法:
let x = (foo === null || foo === undefined) ?
undefined :
foo.bar.baz();
请注意,如果 bar 为 null 或 undefined,我们的代码在访问 baz 时仍会出错。同样,如果 baz 为 null 或 undefined,我们在调用函数时也会出现错误。?. 只会检查其左侧的值是否为 null 或 undefined,而不检查任何后续属性。
可以使用?. 替换许多使用 && 运算符执行中间属性检查的代码。
// 之前
if (foo && foo.bar && foo.bar.baz) {
// ...
}
// 之后
if (foo?.bar?.baz) {
// ...
}
可选链还包括其他两个操作。首先是 可选元素访问,其作用类似可选属性访问,但允许我们访问非标识符属性(例如任意字符串、数字和符号):
/**
* 当我们有一个数组时,返回它的第一个元素
* 否则返回 undefined。
*/
function tryGetFirstElement<T>(arr?: T[]) {
return arr?.[0];
// 等效:
// return (arr === null || arr === undefined) ?
// undefined :
// arr[0];
}
另一个是 可选调用,如果表达式不是 null 或 undefined,我们可以有条件地调用它们。
async function makeRequest(url: string, log?: (msg: string) => void) {
log?.(`Request started at ${new Date().toISOString()}`);
// 等效:
// if (log !== null && log !== undefined) {
// log(`Request started at ${new Date().toISOString()}`);
// }
const result = (await fetch(url)).json();
log?.(`Request finished at at ${new Date().toISOString()}`);
return result;
}
空值合并
使用??作为空值合并运算符
例如:
let x = foo ?? bar();
这是一种新的途径来表示值 foo“存在”时会被使用;但当它为 null 或 undefined 时,就在其位置计算 bar()。
同样,以上代码等效于下面的写法。
let x = (foo !== null && foo !== undefined) ?
foo :
bar();
尝试使用默认值时,?? 运算符可以代替||。例如,以下代码段尝试获取上次保存在 local-Storage 中的 volume 值(如果曾经保存过),但因为它使用了||,所以会报错。
function initializeAudio() {
let volume = localStorage.volume || 0.5
// ...
}
当 localStorage.volume 设置为 0 时,页面会意外地将 volume 设置为 0.5。?? 能避免将 0、NaN 和""中的某些意外行为视为虚假值。
特别注意
因为引入了typescript 3.7.2,类型检查的时候会报一个node_modules/element-ui/types/cascader.d.ts
文件内的错误,找到这个文件,在
import { CascaderOption, CascaderProps, CascaderNode } from './cascader-panel';
之前添加一行
// @ts-ignore
标签:null,bar,undefined,baz,合并,空值,可选链,foo,log 来源: https://www.cnblogs.com/dshvv/p/12044649.html