TypeScript 2.4 新特性一覽

前言

又到周五了，想好周末去哪裡浪了？

今日早讀文章由@vilicvane翻譯授權分享。

正文從這開始～

這一次 TypeScript 更新最直接的改變是對動態 import 和字元串枚舉的支持, 除此之外則是對類型系統的內力修鍊. 自 2.3 支持 language service 插件以來, TypeScript 在相關支持上也在不斷進行磨合和改進, 相信之後被 angular / tslint 等工具用上後體驗會有不少提升 .

動態導入 (import) 表達式

動態 import 表達式是 ECMAScript 的新特性之一, 它讓用戶可以在程序的任意位置非同步地請求一個模塊.

這意味著你可以在條件恰當的情況下延遲載入其他模塊和庫. 舉例來說, 下面的 async 函數在需要的時候才會導入相應工具庫:

asyncfunctiongetZipFile(name:string,files:File[]):Promise{

constzipUtil=awaitimport( ./utils/create-zip-file );

constzipContents=awaitzipUtil.getContentAsBlob(files);

returnnewFile(zipContents,name);

}

很多打包工具支持基於這樣的 import 表達式自動分割結果, 所以可以考慮搭配 esnext 編譯目標來使用這一新功能.

字元串枚舉值

TypeScript 2.4 現在支持枚舉成員中包含字元串初始化器 .

enumColors{

Red="RED",

Green="GREEN",

Blue="BLUE",

}

使用字元串來初始化的枚舉值一個弊端是不能使用反向映射獲取原來的枚舉成員名稱. 換句話說, 你不能通過寫 Colors["RED"] 來獲得字元串 "Red".

改進的泛型推斷

TypeScript 2.4 圍繞泛型推斷的方法引入了一些非常棒的變化.

將返回類型作為推斷目標

其一, TypeScript 現在可以對函數調用的返回值進行推斷. 這可以提升你的使用體驗並捕獲更多錯誤. 一個現在可用的例子:

functionarrayMap(f:(x:T)=>U):(a:T[])=>U[]{

returna=>a.map(f);

}

constlengths:(a:string[])=>number[]=arrayMap(s=>s.length);

另一個你可能會遇上的錯誤的例子:

letx:Promise=newPromise(resolve=>{

resolve(10);

// ~~ 錯誤!

});

從包含上下文的類型推斷類型參數

在 TypeScript 2.4 之前, 在下面的例子中:

letf:(x:T)=>T=y=>y;

y 的類型會是 any. 這意味著雖然程序會進行類型檢查, 但技術上講你可以對 y 做任何事, 比如下面的:

最後一個例子並不是真正類型安全的.

在 TypeScript 2.4 中, 右側的函數隱式地獲得了類型參數, 然後 y 被推斷出具有這個類型參數的類型.

如果你以類型參數的約束不允許的方式來使用 y, 則會像預期一樣得到一個錯誤. 在這個例子中, 對於 T 的約束是 {} (隱式地), 所以最後一個例子會按照預期給出錯誤.

對泛型函數更嚴格的檢查

TypeScript 現在會在比較兩個單一簽名的類型時嘗試去統一類型參數. 作為結果, 你會在與兩個泛型簽名相關的情況下獲得更嚴格的檢查, 接著或許會發現一些 bug.

type A=(x:T,y:U)=>[T,U];

type B=(x:S,y:S)=>[S,S];

functionf(a:A,b:B){

a=b;// 錯誤

b=a;// 正確

}

回調參數的嚴格逆變 (contravariance)

TypeScript 始終使用一個雙變的 (bivariant) 方式來比較參數. 這麼做有不少原因, 在過去這對我們的用戶來說並不是個大問題, 直到我們看到了它在 Promise 和 Observable 的使用中帶來的不利影響.

當關聯兩個回調類型時, TypeScript 2.4 會收緊這種比較. 舉例來說:

interfaceMappable{

map(f:(x:T)=>U):Mappable;

}

declareleta:Mappable;

declareletb:Mappable;

a=b;

b=a;

在 TypeScript 之前, 這個例子能成功編譯. 當關聯 map 的類型時, TypeScript 會雙向關聯它們的參數 (也就是 f 的類型). 當關聯每一個 f 時, TypeScript 又會雙向關聯這些參數的類型.

在 TS 2.4 中當關聯 map 的類型時, 這門語言會檢查是否每個參數都是回調類型, 如果是, 它會確保這些參數在考慮當前關係的情況下會以逆變的方式被檢查.

換言之, TypeScript 現在可以捕獲上述的 bug, 雖然這對於一些用戶來說可能會是一個不兼容的改變, 但能帶來的好處會更多.

弱類型檢測

TypeScript 2.4 引入了 "弱類型" 的概念. 任何全部屬性都可選的類型被認為是弱類型. 比如, 下面的 Options 類型就是一個弱類型:

interfaceOptions{

data?:string,

timeout?:number,

maxRetries?:number,

}

在 TypeScript 2.4 中, 把任何沒有重合屬性的值賦給一個弱類型將會報錯. 舉例來說:

functionsendMessage(options:Options){

// ...

}

constopts={

payload:"hello world!",

retryOnFail:true,

}

// 錯誤!

sendMessage(opts);

// opts 的類型和 Options 間沒有重合的部分.

// 或許我們是想用 data / maxRetries 而不是 payload / retryOnFail .

你可以把這理解為 TypeScript 增強了這些類型的羸弱的保障, 來捕獲本來無法找到的 bug.

由於這是一個破壞兼容性的改變, 你可能需要知道相關的處理方法, 這裡的方法和針對嚴格對象字面量檢查的方法一樣.

聲明確實存在的屬性.

為弱類型添加一個索引簽名 (也就是 [propName: string]: {}).

使用類型斷言 (也就是 opts as Options).

關於本文

譯者：@vilicvane

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！