[[418393]]

今天來介紹一下 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 = undefined 
const k = i ?? 5 
console.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) 
} 

當我們這樣定義函數入參后，在使用函數時，編輯器的智能提示只會提示我們參數類型，丟失了對參數含義的描述。

為了改善這一點，我們可以通過 Labeled tuple types，我們可以這樣定義參數：

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

這樣，在調用函數時，我們的參數就獲得了相應的語義，這使得代碼更加容易維護。

模板字面量類型

自 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 }` 

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

實用類型

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

下面是一個使用 Omit工具的例子，它復制了原始類型的所有屬性，除了我們選擇不包括的那些。

type User = { 
  name: string 
  age: number 
  location: string 
} 
 
type MyUser = Omit<User, 'name'> 

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