专栏首页全栈修仙之路TypeScript 非空断言

TypeScript 非空断言

一、非空断言有啥用

介绍非空断言前,先来看个示例:

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 值域中排除 nullundefined

下面我们来介绍一下非空断言操作符的一些使用场景和注意事项。

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 类型,用于表示链表节点。该类型包含 datanext 两个属性,分别表示当前节点的值和下个节点。之后,我们还定义了以下两个函数:

  • 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 版本中新引入的可选链运算符(?.)和空值合并运算符(??)来提高程序的可读性。

四、参考资源

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • TypeScript 简介及编码规范

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象...

    阿宝哥
  • 了不起的 TypeScript 入门教程

    想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图:

    阿宝哥
  • 玩转 Angular 环境变量

    对于 “程序猿” 来说,在日常开发过程中,我们经常要与不同的开发环境打交道。在实际的项目的开发过程中,一般至少会有两个环境:开发环境和线上环境,这是很简单的情形...

    阿宝哥
  • python学习笔记字符串(二)

    请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此,字符串'abc'只有a,b,c这3个字符。如果'本身也是一个字符,那就可以用""括起来,比如"...

    py3study
  • JS基础测试: 下列等式返回值是true的是?

    规范中提到, 要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,并且规定null 和 undefined 是相等的。

    舒克
  • Python的字符串方法

    s.isdigit() -> bool  Return True if all characters in S are digits

    py3study
  • Unity 游戏的 String interning 优化

    通常情况下,我们难以注意到运行着的 Unity 程序内 String 的实例化情况。这些字符串的创建,销毁的时机是否合理,是否存在有重复 ,冗余 ,低效 以及泄...

    serena
  • 力扣142——环形链表 II

    为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始)。如果 pos 是 -1,则在该链表中没有环。

    健程之道
  • Linux下Socket编程(五)——http容器(支持php)简介

    为了方便操作以及功能模块的拆分,这里我们将请求内容和响应内容进行封装。这里我们只列出头文件,封装类中我们仅仅做了关系字段的提取。

    用户2929716
  • Python--4 基本数据类型

      字符串str是在Python编写程序过程中,最常见的一种基本数据类型。字符串是许多单个子串组成的序列,其主要是用来表示文本。字符串是不可变数据类型,也就是说...

    py3study

扫码关注云+社区

领取腾讯云代金券