淺談TypeScript3.7中值得注意的3個新特性

更新時間：2021年05月07日 14:29:58 作者：淺笑·

這篇文章主要介紹了TypeScript3.7中值得注意的3個新特性，對TS感興趣的同學(xué)，可以參考下

前言

距typescript 3.7正式發(fā)布已經(jīng)有一段時間了，這段時間正在對手上的項目進行typescript的遷移工作，所以會特別留意每一次的release。

對于3.7中包含的新特性，其實相比較之前幾次release來說，算是一個比較小的發(fā)布版本，但是其中包含的幾個特性對代碼質(zhì)量本身，會帶來顯著地提升。

Optional Chaining

首先第一個特性是對于optional chaining操作符的支持，翻譯過來應(yīng)該可以叫做可選鏈操作符，當(dāng)然我還是覺得這樣翻譯有點怪怪的，暫且就直接用英文好了。

這個特性首先是es2019中包含的一個新特性，對于特性本身，有興趣的可以參考這里。

由于typescript是JavaScript的超集，所以預(yù)先實現(xiàn)這個特性也是在預(yù)料之內(nèi)的事情，大概使用方式是這樣的：

a?.b();

等價于：

if(a) a.b();
// 或者
a && a.b()

如果是多層嵌套，比如b也是一個對象，要繼續(xù)調(diào)用c()，那么可以這樣：

a?.b?.c()

但其實就算這樣寫的話，它也不是安全的，因為b()中的b也有可能是空值，直接調(diào)用的話，也會拋出異常。為了絕對的安全，可以這樣寫：

a?.b?.();

值得注意的是，這里一定要對于可選的含義有一個正確的理解，可選的意思是，它在類型的聲明中，通過?來修飾，代表一個類型包含某個可為空值的屬性。言外之意的意思就是，?.不會對那些不符合類型聲明本身的屬性調(diào)用，比如：

interface A {}

const a: A = {};

a?.b?.(); // Property 'b' does not exist on type 'A'

除非A接口的聲明改為：

interface A {
  b?: any
}

這個特性在項目的實踐意義是很大的，我們可以寫更少的if斷言語句或者&&操作符，但是卻達到了相同的效果。

Nullish Coalescing

中文翻譯過來會叫做雙問號操作符，這個其實挺形象的，因為它的語法確實就是??。

這個操作符的功能，往簡單說，就是為一個空值，指定一個默認值，類似下面的代碼：

let a = b || 'foo'

當(dāng)b為空值時，由于||操作符的特性，a的值會被賦予foo。如果使用??操作符進行改寫，如下：

let a = b ?? 'foo'

表面上看，似乎兩者沒什么區(qū)別，但其實這里隱含了一個問題，就是||對于空值的概念，并不僅僅指null和undefined，類似false、0等一系列邏輯上為false的值都會算作空值，這顯然是有問題的，比如：

const b = 0
let a = b || 'foo'
// a 為 'foo'

這個示例中，我們期望a只有在b為真正意義上的空值（null或者undefined）時，才被賦予默認值，a應(yīng)當(dāng)?shù)扔?，而實際運行結(jié)果確實foo，因為b=0，在||操作符的運行過程中，它會被解釋為false。我曾在實際項目中，編寫過一個驗證碼組件，很不幸，踩上了這個坑，當(dāng)時為了debug這個問題，花了很長時間。

但使用??操作符，就不會存在這個問題。

Uncalled Function Checks

我相信很多人都曾經(jīng)遇過類似的問題，因為缺乏有效的命名規(guī)范，斷言屬性和斷言方法會在實際項目中被混用，比如：

class A {
    isFoo(): boolean {
        return false;
    }
}

function test(a: A) {
    if (a.isFoo) { 
        ...
    } 
}

這里如果我們的本意是要通過調(diào)用a.isFoo來獲取一個斷言值，我們明顯犯了一個錯誤，我們應(yīng)當(dāng)使用if (a.isFoo())，而不是直接if (a.isFoo)，因為后者雖然在語法層面沒有錯誤，但是在邏輯含義，它將被斷言為true。但在3.7發(fā)布之后，typescript會嘗試幫助我們發(fā)現(xiàn)這個問題。

雖然如此，但我仍然建議大家針對斷言方法和斷言屬性制定統(tǒng)一的命名規(guī)范，比如isXXX代表屬性，而assertXXX代表方法。