[译] 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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。