TypeScript 非空断言
发布于 2020-04-08 15:20:15
17.5K0
举报
一、非空断言有啥用
介绍非空断言前，先来看个示例：
function sayHello(name: string | undefined) {
let sname: string = name; // Error
}对于以上代码，TypeScript 编译器会提示一下错误信息：
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.要解决上述问题，我们可以简单加个条件判断：
function sayHello(name: string | undefined) {
let sname: string;
if (name) {
sname = name;
}
}使用这种方案，问题是解决了。但有没有更简单的方式呢？答案是有的，就是使用 TypeScript 2.0 提供的非空断言操作符：
function sayHello(name: string | undefined) {
let sname: string = name!;
}二、非空断言操作符简介
在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非undefined 类型。具体而言，x! 将从 x 值域中排除 null 和 undefined 。
下面我们来介绍一下非空断言操作符的一些使用场景和注意事项。
2.1 忽略 undefined 和 null 类型
function myFunc(maybeString: string | undefined | null) {
// Type 'string | null | undefined' is not assignable to type 'string'.
// Type 'undefined' is not assignable to type 'string'.
const onlyString: string = maybeString; // Error
const ignoreUndefinedAndNull: string = maybeString!; // Ok
}2.2 调用函数时忽略 undefined 类型
type NumGenerator = () => number;
function myFunc(numGenerator: NumGenerator | undefined) {
// Object is possibly 'undefined'.
// Cannot invoke an object which is possibly 'undefined'.
const num1 = numGenerator(); // Error
const num2 = numGenerator!(); //OK
}2.3 使用非空断言操作符的注意事项
因为 ! 非空断言操作符会从编译生成的 JavaScript 代码中移除，所以在实际使用的过程中，要特别注意。
下面我们来举两个简单的示例：
示例一
const a: number | undefined = undefined;
const b: number = a!;
console.log(b);以上 TS 代码会编译生成以下 ES5 代码：
"use strict";
const a = undefined;
const b = a;
console.log(b);虽然在 TS 代码中，我们使用了非空断言，使得 const b: number = a!; 语句可以通过 TypeScript 类型检查器的检查。但在生成的 ES5 代码中，! 非空断言操作符被移除了，所以在浏览器中执行以上代码，在控制台会输出 undefined。
示例二
type NumGenerator = () => number;
function myFunc(numGenerator: NumGenerator | undefined) {
const num1 = numGenerator!();
}
// Uncaught TypeError: numGenerator is not a function
myFunc(undefined); // Error以上 TS 代码会编译生成以下 ES5 代码：
"use strict";
function myFunc(numGenerator) {
var num1 = numGenerator();
}
// Uncaught TypeError: numGenerator is not a function
myFunc(undefined); // Error若在浏览器中运行以上代码，在控制台会输出以下错误信息：
Uncaught TypeError: numGenerator is not a function
at myFunc (eval at <anonymous> (main-3.js:1239), <anonymous>:3:16)
at eval (eval at <anonymous> (main-3.js:1239), <anonymous>:6:1)
at main-3.js:1239很明显在运行时，undefined 并不是函数对象，所以就不能正常调用。
需要注意的是，非空断言操作符仅在启用
strictNullChecks标志的时候才生效。当关闭该标志时，编译器不会检查 undefined 类型和 null 类型的赋值。
三、非空断言操作符使用示例
在以下示例中，首先我们使用 TypeScript 类型别名定义了一个 ListNode 类型，用于表示链表节点。该类型包含 data 和 next 两个属性，分别表示当前节点的值和下个节点。之后，我们还定义了以下两个函数：
- addNext(node: ListNode)：用于添加下一个节点；
- setNextValue(node: ListNode, value: number)：用于设置下一个节点的值。
type ListNode = { data: number; next?: ListNode; };
function addNext(node: ListNode) {
if (node.next === undefined) {
node.next = {data: 0};
}
}
function setNextValue(node: ListNode, value: number) {
addNext(node);
// (property) next?: ListNode | undefined
// Object is possibly 'undefined'.(2532)
node.next.data = value; // Error
}对于以上代码尽管我们知道在调用 addNext 方法后，node.next 属性会被定义，但 TypeScript 在 node.next.data = value 这行代码中并不能推断出这些。这时候我们可以使用非空断言运算符 ! 来断言 node.next 并不是 undefined，并且使编译器警告无效：
function setNextValue(node: ListNode, value: number) {
addNext(node);
node.next!.data = value;
}接着我们继续看一个示例，假设你有一个表示 AJAX 请求过程的 UI 状态。它要么处于初始状态（initial），要么处于挂起状态（pending），要么处于完成状态（complete），要么处于错误状态（error）。只有在完成状态下才有响应，否则为 null。
type AjaxState<T> = {
state: 'initial' | 'pending' | 'complete' | 'error';
response: T | null;
}
function getAjaxState( ajaxState: AjaxState<number[]> ) {
if (ajaxState.state === 'complete') {
// (property) response: number[] | null
// Object is possibly 'null'.(2531)
console.log(ajaxState.response.length); // Error
}
}虽然我们知道当请求的状态为 complete 时，响应对象不会为 null，但 TypeScript 并无法感知这些，所以我们还需要使用非空断言 ajaxState.response!.length 来忽略空值并使编译器警告无效。对于这种场景，其实有一个更好的解决方案，即使用可辨识联合：
type AjaxState<T> =
{ state: 'initial'|'pending'|'error', response: null } |
{ state: 'complete', response: T };
function getAjaxState( ajaxState: AjaxState<number[]> ) {
if (ajaxState.state === 'complete') {
console.log(ajaxState.response.length);
}
}通过引入可辨识联合类型，我们把为 null 和非 null 的响应完美的区分开来，还避免了再次使用非空断言，此外还大大提高了程序的可读性。在 TypeScript 实际项目的开发过程中，除了使用非空断言（!）之外，读者还可以使用 TypeScript 3.7 版本中新引入的可选链运算符（?.）和空值合并运算符（??）来提高程序的可读性。
