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

做者：Marius Schulz
譯者：前端小智
來源：Marius Schulz

在這篇文章中，咱們將討論發佈於 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。

原文：https://mariusschulz.com/blog...

周愛民老師出新課了，想當初仍是看他的書入門的，此次新課大綱不錯，強烈推薦啊，使用 ILOVEJSJS 優惠碼再便宜5元

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

阿里雲最近在作活動，低至2折，有興趣能夠看看：https://promotion.aliyun.com/...

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq449245884/xiaozhi

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。