這 6 個 TS 新特性經常用到,用了之後我再也離不開它

今天來介紹一下 TypeScript 的一些較新的功能和進展,這些是我在日常工作中經常在用的功能。

在建構函式中直接定義屬性

Typescript 中可以透過建構函式的引數直接定義屬性,我們來先看早期的做法:

class Note { public title: string; public content: string; private history: string[]; constructor(title: string, content: string, history: string[]) { this。title = title; this。content = content; this。history = history; }}

採用 ts 中簡寫的語法:

class Note { constructor( public title: string, public content: string, private history: string[] ){ // 這裡不用在寫 this。title = title }}

它可能看上去不像是有屬性的類,但它確實有,利用的是 Typescript 提供的簡寫形式 — 用建構函式的引數直接定義屬性。

這個簡寫語法做了很多:

聲明瞭一個建構函式引數及其型別

聲明瞭一個同名的公共屬性

當我們 new 出該類的一個例項時,把該屬性初始化為相應的引數值

空值合併

??

其實沒啥意思,就是Nullish Coalescing (空值合併)。聽起來有點懵,我們直接上程式碼

const i = undefinedconst k = i ?? 5console。log(k) // 5// 3。9。2編譯const i = undefined;const k = i !== null && i !== void 0 ? i : 5;console。log(k); // 5

這個時候你肯定是想說了這樣不就完了嗎?

let k = i || 5

雖然這樣也用,但是你不覺得很不嚴謹嗎?如果

i = 0

呢?

私有類欄位

TypeScript 3。8 將支援 ECMAScript 私有欄位,千萬別和 TypeScript private 修飾符 混淆。

這是在 TypeScript 中具有私有類欄位的類:

class Animal { #name: string; constructor(theName: string) { this。#name = theName; }}

private

關鍵字之上使用私有類欄位的區別在於前者有更好的執行時保證。用

private

關鍵字宣告的 TypeScript 欄位將在編譯後的JavaScript程式碼中成為常規欄位。另一方面,私有類欄位在編譯後的程式碼中仍然是私有的。

試圖在執行時訪問私有類欄位將導致語法錯誤。我們也使用瀏覽器開發工具也檢查不了私有類欄位。

有了私有類欄位,我們終於在JavaScript中得到了真正的隱私。

命名元組型別(Labeled tuple types)

命名元組型別適需要 TypeScript 4。0及以上版本才能使用,它極大的改善了我們的開發體驗及效率,先來看一個例子:

type Address = [string, number]function setAddress(。。。args: Address) { // some code here console。log(args)}

當我們這樣定義函式入參後,在使用函式時,編輯器的智慧提示只會提示我們引數型別,丟失了對引數含義的描述。

這 6 個 TS 新特性經常用到,用了之後我再也離不開它

為了改善這一點,我們可以透過 Labeled tuple types,我們可以這樣定義引數:

type Address = [streetName: string, streetNumber: number]function setAddress(。。。args: Address) { // some code here console。log(args)}

這 6 個 TS 新特性經常用到,用了之後我再也離不開它

這樣,在呼叫函式時,我們的引數就獲得了相應的語義,這使得程式碼更加容易維護。

模板字面量型別

自 ES6 開始,我們就可以透過模板字面量(Template Literals)的特性,用反引號來書寫字串,而不只是單引號或雙引號:

const message = `text`;

正如 Flavio Copes 所言,模板字面量提供了之前用引號寫的字串所不具備的特性:

定義多行字串非常方便

可以輕鬆地進行變數和表示式的插值

可以用模板標籤建立 DSL(Domain Specific Language,領域特定語言)

模板字面量型別和 JavaScript 中的模板字串語法完全一致,只不過是用在型別定義裡面:

type topBottom = “top” | “bottom”type leftRight = “left” | “right”type Position = `${topBottom }-${leftRight }`

這 6 個 TS 新特性經常用到,用了之後我再也離不開它

當我們定義了一個具體的字面量型別時,TypeScript 會透過拼接內容的方式產生新的字串字面量型別。

實用型別

TypeScript為你提供了一組實用型別,讓你在現有型別的基礎上構建新的型別。有許多實用型別涵蓋了不同的情況,例如選擇型別屬性來複制,大寫字母,或使所有的屬性都是可選的。

下面是一個使用

Omit

工具的例子,它複製了原始型別的所有屬性,除了我們選擇不包括的那些。

這 6 個 TS 新特性經常用到,用了之後我再也離不開它

type User = { name: string age: number location: string}type MyUser = Omit

上面這些就是我工作經常使用的一部分,另外一些後面在分享,就這?

~完,我是刷碗智,準備吵雞吃,我們下期在見。