其他分享
首页 > 其他分享> > 可选链与空值合并

可选链与空值合并

作者:互联网

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