TypeScript“奇怪”的符号

本文将分享这些年在学习 TypeScript 过程中，遇到的 10 大 “奇怪” 的符号。其中有一些符号，码云笔记第一次见的时候也觉得 “一脸懵逼”，希望本文对学习 TypeScript 的小伙伴能有一些帮助。

! 非空断言操作符

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言，x! 将从 x 值域中排除 null 和 undefined 。

function myFunc(maybeString: string | undefined | null) {
  const onlyString: string = maybeString; // Error
  const ignoreUndefinedAndNull: string = maybeString!; // Ok
}

调用函数时忽略 undefined 类型 场景

type NumGenerator = () => number;
function myFunc(numGenerator: NumGenerator | undefined) {
  const num1 = numGenerator(); // Error
  const num2 = numGenerator!(); //OK
}

?. 运算符

TypeScript 3.7 实现了呼声最高的 ECMAScript 功能之一：可选链（Optional Chaining）。有了可选链后，我们编写代码时如果遇到 null 或 undefined 就可以立即停止某些表达式的运行。可选链的核心是新的 ?. 运算符

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
const val = a?.b;

语句编译生成的 ES5 代码：

var val = a === null || a === void 0 ? void 0 : a.b;

可选链与函数调用

let result = obj.customMethod?.();

?? 空值合并运算符

在 TypeScript 3.7 版本中除了引入了前面介绍的可选链 ?. 之外，也引入了一个新的逻辑运算符 —— 空值合并运算符 ??
当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。

const foo = null ?? 'default string';
console.log(foo); // 输出："default string"

短路

不能与 && 或 || 操作符共用

(null || undefined ) ?? "foo"; // 返回 "foo"

与可选链操作符 ?. 的关系

空值合并运算符针对 undefined 与 null 这两个值，可选链式操作符 ?. 也是如此。可选链式操作符，对于访问属性可能为 undefined 与 null 的对象时非常有用。

interface Customer {
  name: string;
  city?: string;
}

let customer: Customer = {
  name: "Semlinker"
};

let customerCity = customer?.city ?? "UnkNown city";
console.log(customerCity); // 输出：UnkNown city

?: 可选属性

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。