TypeScript 2.0 开启空值的严格检查

本文分享自华为云社区《TypeScript开启严格空值检查》，作者：搞前端的半夏。

在 TS 中，有对应 JS 中的基础类型 null 和 undefined。

TypeScript 里，JS 中的基本数据类型 undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。

let u: undefined = undefined;let n: null = null;

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

例如下面的代码，在 TS 中是完全可以执行的。

let userName: string;userName = "搞前端的半夏";  // OKuserName = null;      // OKuserName = undefined; // OK
let age: number;age = 18;        // OKage = null;      // OKage = undefined; // OK
let isBoy: boolean;isBoy = true;      // OKisBoy = false;     // OKisBoy = null;      // OKisBoy = undefined; // OK

在编程过程成空指针是最常见的 bug 之一，但是在 TypeScript 中我们无法使用具体的类型来表示特定的变量不能为空！幸运的是，TypeScript 2.0 解决了这个问题！。

strictNullChecks

TypeScript 2.0 增加了对不可为空类型的支持。有一种新的严格空值检查模式，他提供了 strictNullChecks

来限制对空值的检查。可以通过在命令行上添加--strictNullChecks 参数来启功严格空值检查。也可以在项目的 tsconfig.json 文件中启用 strictNullChecks 编译器选项。

在 TS 中，为了各版本的兼容，strictNullChecks 的默认值是 false

{  "compilerOptions": {    "strictNullChecks": true    // ...  }}

在 TS 官方的演练场中你可以勾选 strictNullChecks 来启用严格空值检查！

注意点 1

在严格空值检查模式下，null 和 undefined 无法赋值给其他类型的变量。

例如下面的代码在*strictNullChecks=true 下，是无法编译通过的。

let userName: string;userName = "搞前端的半夏";  // OKuserName = null;      // OKuserName = undefined; // OK

注意点 2

严格空值检查并不意味着变量的类型无法设置为 null 和 undefined

例如下面的代码在*strictNullChecks=true 下，正常编译通过的。

let userName: null;userName = null;  
let age: undefined;age = undefined;  

变量如何可以为空

在正常的编程中，我们并不会直接将一个变量的类型设置为 null 或者 undefined，例如 username，我们通常设置为 string 类型。

如果我们想要 username 可以接受空值我们该怎么办呢？

1. 使用联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

对于下面的代码，userName 可以接受 null 类型的值。但是无法接受 undefined 的值

let userName: string | null;userName = "搞前端的半夏";  // OKuserName = null;      // OKuserName = undefined; // Error

2. a? 默认 undefined

联合类型可以在 Object 中使用

type User = {  name: string ;  age:number | undefined};

这里我们设置 age 的类型为 number 和 undefined。

下面的两种用法都是正确的。

let user1: User = { name: "搞前端的半夏", age: undefined };let user2: User = { name: "搞前端的半夏", age: 18 };

如果我们想要下面的效果，不需要手动给 age 赋值

let user2: User = { name: "搞前端的半夏"};

此时我们就需要用到**?**来使属性成为可选，这样我们就可以完全省略 age 属性的定义。

type User = {  name: string ;  age?:number };

请注意，在这种情况下：undefined 类型会自动添加到联合类型中。因此，以下所有赋值都是正确的：

let user1: User = { name: "搞前端的半夏", age: undefined };let user2: User = { name: "搞前端的半夏", age: 18 };let user3: User = { name: "搞前端的半夏"};

安全检查

变量可空的安全检查

如果变量的类型包含 nullor undefined，则访问任何属性都会产生编译时错误：

function UserNameLength(userName: string | null) {  return userName.length;}

所以在访问属性之前，必须要先判断变量的值是否为空！

function UserNameLength(userName: string | null) {  if (userName === null) {    return 0;  }
  return userName.length;}

#可空类型的函数调用

在 JS 中支持回调函数，所以函数的参数会可能是函数类型，

function fn(callback?: () => void) {  callback();}

如果该参数是可选的函数类型，TS 会将该参数加上 undefined 类型。

那么这个函数的我们在调用函数的时候会报错！

类似于在访问属性之前检查对象，我们需要首先检查函数是否具有非空值：

function fn(callback?: () => void) {  if (callback) {    callback();  }}

点击关注，第一时间了解华为云新鲜技术~