TypeScript 开启严格空值检查（strictNullChecks）详解

在 TypeScript 语言中，JavaScript 的基本数据类型 undefined 和 null 各自拥有独立的类型，分别称为 undefined 和 null。例如：let u: undefined = undefined; let n: null = null;。

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

默认情况下，null 和 undefined 被视为所有类型的子类型。这意味着可以将 null 和 undefined 赋值给任何类型的变量，包括 number 类型的变量。

例如，以下代码在 TypeScript 中默认是可以正常执行的。

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

let age: number;
age = 18;        // OK
age = null;      // OK
age = undefined; // OK

let isBoy: boolean;
isBoy = true;      // OK
isBoy = false;     // OK
isBoy = null;      // OK
isBoy = undefined; // OK

空指针错误是编程中最常见的 bug 之一。在早期 TypeScript 版本中，无法通过具体类型来约束变量不能为空。TypeScript 2.0 引入了严格空值检查机制来解决这一问题。

一、strictNullChecks

TypeScript 2.0 增加了对不可为空类型的支持，引入了新的严格空值检查模式，即 strictNullChecks。

该模式用于限制对空值的隐式赋值。可以通过在命令行添加 --strictNullChecks 参数来启用严格空值检查，或者在项目的 tsconfig.json 文件中配置 strictNullChecks 编译器选项。

为了保持与各旧版本的兼容性，TypeScript 中 strictNullChecks 的默认值为 false。

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

在 TypeScript 官方 Playground 中，你可以直接勾选 strictNullChecks 选项来启用严格空值检查功能。

注意点 1

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

例如，以下代码在 strictNullChecks=true 的配置下，将无法通过编译。

let userName: string;
userName = "搞前端的半夏";  // OK
userName = null;      // OK
userName = 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 = "搞前端的半夏";  // OK
userName = null;      // OK
userName = 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: "搞前端的半夏"};

三、安全检查

1. 变量可空的安全检查

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

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

因此，在访问属性之前，必须先判断变量的值是否为空。

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

  return userName.length;
}

四、可空类型的函数调用

JavaScript 支持回调函数，因此函数的参数可能是函数类型。

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

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

直接调用该函数时会报错。

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

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

到此这篇关于 TypeScript 如何开启严格空值检查的文章就介绍到这了，更多相关 TypeScript 严格空值检查内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！