可选链与空值合并

Posted 2021-03-22 dshvv

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