【TypeScript 演化史 -- 1】non-nullable 的类型

做者：Marius Schulz

译者：前端小智

来源：Marius Schulz

点赞再看，养成习惯

本文 GitHub：github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

在这篇文章中，咱们将讨论发布于 TypeScript 2.0 中的 non-nullable 类型，这是对类型系统的一个重大的改进，该特性可对 null 和 undefined 的检查。cannot read property 'x' of undefined 和 undefined is not a function 在 JS 中是很是常见的错误,non-nullable 类型能够避免此类错误。

null 和 undefined 的值

在 TypeScript 2.0 以前，类型检查器认为 null 和 undefined 是每种类型的有效值。基本上，null 和 undefined 能够赋值给任何东西。这包括基本类型，如字符串、数字和布尔值:

let name: string;
name = "Marius";  // OK
name = null;      // OK
name = undefined; // OK

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

let isMarried: boolean;
isMarried = true;      // OK
isMarried = false;     // OK
isMarried = null;      // OK
isMarried = undefined; // OK
复制代码

以 number 类型为例。它的域不只包括全部的IEEE 754浮点数，并且还包括两个特殊的值 null 和 undefined

对象、数组和函数类型也是如此。没法经过类型系统表示某个特定变量是不可空的。幸运的是，TypeScript 2.0 解决了这个问题。

严格的Null检查

TypeScript 2.0 增长了对 non-nullable 类型的支持，并新增严格 null 检查模式，能够经过在命令行上使用 ——strictNullChecks 标志来选择进入该模式。或者，能够在项目中的 tsconfig.json 文件启用 strictnullcheck 启用。

{
  "compilerOptions": {
    "strictNullChecks": true
    // ...
  }
}
复制代码

在严格的 null 检查模式中，null 和 undefined 再也不分配给每一个类型。null 和undefined 如今都有本身的类型，每一个类型只有一个值

若是我们在编译前时启用了严格的 null 检查，若是将 null 或 undefined 分配给任何变量都会致使类型错误

// 使用 --strictNullChecks 编译

let name: string;
name = "Marius";  // OK
name = null;      // Error
name = undefined; // Error

let age: number;
age = 24;        // OK
age = null;      // Error
age = undefined; // Error

let isMarried: boolean;
isMarried = true;      // OK
isMarried = false;     // OK
isMarried = null;      // Error
isMarried = undefined; // Error
复制代码

那么，如何在 TypeScript 2.0 中使变量为空？

用联合类型构建可空性

因为在启用严格的 null 检查时，类型在默认状况下是不可空的，因此咱们须要显式指定可为空，并告诉类型检查器咱们但愿哪些变量为空。咱们经过构造一个包含 null 或undefined 类型的联合类型来实现这一点

let name: string | null;
name = "Marius";  // OK
name = null;      // OK
name = undefined; // Error
复制代码

注意，undefined 不是 name 变量的有效值，由于联合类型不包含 undefined 类型

这种可空性方法的一大优势是，类型中哪些成员是可空的变得很明显，而且能够自文档化。以这个简单的 User 类型为例:

type User = {
  firstName: string;
  lastName: string | undefined;
};

let jane: User = { firstName: "Jane", lastName: undefined };
let john: User = { firstName: "John", lastName: "Doe" };
复制代码

咱们能够经过添加 ? 将 lastName 属性设为可选。这样就能够彻底省略 las​​tName 属性的定义。 此外，undefined 的类型会自动添加到联合类型中。 所以，如下全部分配类型都是能够的：

type User = {
  firstName: string;
  lastName?: string;
};

// 能够为 lastName 属性分配一个字符串
let john: User = { firstName: "John", lastName: "Doe" };

// 或者 undefined
let jane: User = { firstName: "Jane", lastName: undefined };

// 还能够省略
let jake: User = { firstName: "Jake" };
复制代码

可为空类型的属性访问

若是对象的类型包括 null 或 undefined，则访问任何属性都会产生编译时错误：

function getLength(s: string | null) {
  // Error: Object 可能为空
  return s.length;
}
复制代码

在访问属性以前，须要使用类型保护来检查给定对象上的属性访问是否安全：

function getLength(s: string | null) {
  if (s === null) {
    return 0;
  }

  return s.length;
}
复制代码

TypeScript 是兼容 JS ，并支持条件表达式中的类型保护，因此这种方法也能够:

function getLength(s: string | null) {
  return s ? s.length : 0;
}
复制代码

使用可空类型的函数调用

若是试图调用包含 null 或 undefined 类型的函数，则会产生编译时错误。下面的callback 参数是可选的(注意?)，因此它可能 undefined。所以，它不能被直接调用

function doSomething(callback?: () => void) {
  // Error: 不能调用多是 “undefined” 的对象
  callback();
}
复制代码

与在访问属性以前检查对象相似，咱们首先须要检查函数是否具备非空值:

function doSomething(callback?: () => void) {
  if (callback) {
    callback();
  }
}
复制代码

还能够用 typeof 检查返回的值

function doSomething(callback?: () => void) {
  if (typeof callback === "function") {
    callback();
  }
}
复制代码

总结

Non-nullable 类型是 TypeScript 类型系统的基础和有价值的补充。它们容许对哪些变量和属性能够为空进行精确构建。只有在类型保护将属性访问或函数调用肯定为安全以后，才容许进行属性访问或函数调用，从而避免了许多编译时的可空性错误。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：mariusschulz.com/blog/non-nu…

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。