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

前言

距typescript 3.7正式發佈已經有一段時間瞭,這段時間正在對手上的項目進行typescript的遷移工作,所以會特別留意每一次的release。

對於3.7中包含的新特性,其實相比較之前幾次release來說,算是一個比較小的發佈版本,但是其中包含的幾個特性對代碼質量本身,會帶來顯著地提升。

Optional Chaining

首先第一個特性是對於optional chaining操作符的支持,翻譯過來應該可以叫做可選鏈操作符,當然我還是覺得這樣翻譯有點怪怪的,暫且就直接用英文好瞭。

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

由於typescript是JavaScript的超集,所以預先實現這個特性也是在預料之內的事情,大概使用方式是這樣的:

a?.b();

等價於:

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

如果是多層嵌套,比如b也是一個對象,要繼續調用c(),那麼可以這樣:

a?.b?.c()

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

a?.b?.();

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

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'

當b為空值時,由於||操作符的特性,a的值會被賦予foo。如果使用??操作符進行改寫,如下:

let a = b ?? 'foo'

表面上看,似乎兩者沒什麼區別,但其實這裡隱含瞭一個問題,就是||對於空值的概念,並不僅僅指null和undefined,類似false、0等一系列邏輯上為false的值都會算作空值,這顯然是有問題的,比如:

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

這個示例中,我們期望a隻有在b為真正意義上的空值(null或者undefined)時,才被賦予默認值,a應當等於0,而實際運行結果確實foo,因為b=0,在||操作符的運行過程中,它會被解釋為false。我曾在實際項目中,編寫過一個驗證碼組件,很不幸,踩上瞭這個坑,當時為瞭debug這個問題,花瞭很長時間。

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

Uncalled Function Checks

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

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

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

這裡如果我們的本意是要通過調用a.isFoo來獲取一個斷言值,我們明顯犯瞭一個錯誤,我們應當使用if (a.isFoo()),而不是直接if (a.isFoo),因為後者雖然在語法層面沒有錯誤,但是在邏輯含義,它將被斷言為true。但在3.7發佈之後,typescript會嘗試幫助我們發現這個問題。

雖然如此,但我仍然建議大傢針對斷言方法和斷言屬性制定統一的命名規范,比如isXXX代表屬性,而assertXXX代表方法。

其他

其他的一些變更,均是易用性上的一些改變,比如:

  • Flatter Error Reporting:會將一大段的類型重復的錯誤日志,盡可能地壓縮為單條、更準確、更精簡的錯誤日志
  • 文件級別的@ts-nocheck:之前版本中該註解僅支持行內級別
  • 遞歸類型聲明:能夠在類型聲明中,使用遞歸語法來聲明更復雜的類型,比如json類型
  • 對js文件提供declaration支持,以減小從js項目遷移的遷移成本

以上就是淺談TypeScript3.7中值得註意的3個新特性的詳細內容,更多關於TypeScript3.7新特性的資料請關註WalkonNet其它相關文章!

推薦閱讀: