[譯] TypeScript 4.0 終於發佈了我一直在等待的東西

• 原文地址：TypeScript 4.0 finally delivers what I’ve been waiting for
• 原文做者：Nathaniel Kessler
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：rocwong-cn
• 校對者：Inchill、Samuel Jie

昨天，微軟官宣了 TypeScript 4.0 的候選版本。而後隨之而來的 具標籤的元組元素（Labeled Tuple Elements），就成爲了這篇文章標題的答案。

具備未知參數的泛型接口

這是一我的爲的例子。IQuery，它旨在描述查詢事物的函數的形狀。它老是返回一個 Promise 而且使用一個 泛型 來描述這個 Promise 發出的的內容（TReturn）。該接口對於沒有參數或者未知數量的參數（UParams extends any[] = []）的場景也足夠靈活。

interface IQuery<TReturn, UParams extends any[] = []> {
  (...args: UParams): Promise<TReturn>
}
複製代碼

示例函數：findSongAlbum()

利用此接口，咱們將編寫一個根據標題和歌手查找對應歌曲專輯的函數。它返回一個發出 Album 類型的單個對象的 Promise。

type Album = {
  title: string
}
複製代碼

不使用 TypeScript，該函數可能以下所示：

const findSongAlbum = (title, artist) => {
  // 一些獲取數據的代碼...
  
  const albumName = '1989';

  return Promise.resolve({
     title: albumName
  });
}
複製代碼

使用 TypeScript 並利用 IQuery 接口，你能夠將 Album 類型做爲第一個泛型參數傳遞，以確保 Promise 觸發返回的數據類型始終與 Album 類型匹配。

const findSongAlbum: IQuery<Album> = (title, artist) => {
  // 一些獲取數據的代碼...
  
  const albumName = '1989';

  return Promise.resolve({
     title: albumName
  });
}
複製代碼

TypeScript 4.0 發佈之前

你還想定義其餘參數及其類型。在這種狀況下，title 和 artist 都是字符串。你定義了一個新類型 Params，並將其做爲 IQuery 的第二個參數傳遞。

在示例中，TypeScript 4.0 發佈之前，Params 將會被定義成一個類型列表。列表中定義的的每一項都和參數列表中順序一致。這種類型的輸入稱爲 元組 類型。

type Params: [string, string]

const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  // 一些獲取數據的代碼...
  
  const albumName = '1989';

  return Promise.resolve({
     title: albumName
  });
}
複製代碼

您能夠在上面的 Params 類型中看到，第一項類型是 string，使第一個參數 「title」 的類型成爲 string。第二項，固然，遵循相同的模式，也是 string 使第二個參數 「artist」 的類型成爲了 string。這將爲咱們的參數列表提供適當的類型安全。

不幸的是，當你在函數中以這種方式使用元組類型時，它並不會提供有用的類型安全標籤。相反，它只是將參數列出爲 args_0: string，args_1: string。除了知道第一個參數是 string 以外，"arg_0」 並無告訴我第一個參數應該是我要搜索的歌曲的 「title」。

TypeScript 4.0 以後

使用 TypeScript 4 候選版本，咱們能夠得到具標籤元組元素（Labeled Tuple Elements），咱們可使用它來獲取參數列表中的有用標籤。

如今，Params 類型的每項都會得到一個標籤，只要您使用 findSongAlbum 函數，該標籤就會在您的 IDE 中很好地顯示出來。

type Params: [title: string, artist: string]

const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  // 一些獲取數據的代碼...
  
  const albumName = '1989';

  return Promise.resolve({
     title: albumName
  });
}
複製代碼

如今，咱們在智能提示中獲得的是 title: string，而不是 arg_0: string，它告訴咱們須要傳遞的是什麼內容的字符串。

感謝您的閱讀 ❤

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。