TypeScript ?? 空值合并操作符

TypeScript 3.7新增了一个空值合并操作符(nullish coalescing operator) ??
当左侧的值为null或者 undefined 时，返回自定义的默认值。

const str = null ?? 'default string'; // 输出结果为 default string
const str1 = 0 ?? 'default string'; // 输出结果为 0
const str1 = '  '  ?? 'default string'; // 输出结果为'  '
const str2 = (undefined ?? -1) > -1; // 输出结果为 false
const str2 = (0 ?? -1) > -1; // 输出结果为 true

为何需要使用 ??

在我们写代码的过程中，往往会遇到这种场景：
当函数没有传入参数时，给它一个默认值

function plusTest(num) {
  const a = num || 'default string';
  console.log(a);
}
plusTest(); // default string
plusTest(0); // default string
plusTest(''); // default string
plusTest(false); // default string
plusTest(15); // 15

如上面代码第2行所示，当使用 || 或操作符时，javascript 会先把左侧的值转成布尔类型进行判断，如果转换后的布尔值为true，则结果为左侧的值，否则为右侧值。当传入的参数是 0或者 false这种假值的时候，会导致函数中变量赋值不正确。
使用 ?? 的话，结果就不一样了，来看一下：

function plusTest(num) {
  const a = num ?? 'default string';
  console.log(a);
}
plusTest(); // default string
plusTest(0); // 0
plusTest(''); // ''
plusTest(false); // false
plusTest(15); // 15

这样就可以避免传入参数为假值时变量赋值不正确的问题。

在 angular 中使用 ??

首先 typescript 版本要在3.7及以上，其次如果 vscode 编辑器版本太低，也需要更新一下 vscode，不然代码中会报红线提示

图片.png