c函数接口传入未知参数_具有未知参数的通用接口

c函数接口传入未知参数

重点 (Top highlight)

Yesterday, Microsoft announced the release candidate of TypeScript 4.0. And with that comes Labeled Tuple Elements, which is the answer to the title of this post.

昨天，微软宣布了TypeScript 4.0的候选版本 。 随之而来的是Labeled Tuple Elements ，它是这篇文章标题的答案。

具有未知参数的通用接口 (Generic interface with unknown arguments)

Here’s a contrived example. IQuery. It’s meant to describe the shape of functions that query things. It always returns a promise and takes a Generic to describe what the promise emits (TReturn). The interface is also flexible enough to take no arguments or an unknown number of arguments (UParams extends any[] = []).

这是一个人为的例子。 IQuery 。 它旨在描述查询事物的功能的形状。 它总是返回一个promise，并使用一个泛型来描述promise发出的内容( TReturn )。 该接口也足够灵活，不接受任何参数或数量未知的参数( UParams extends any[] = [] )。

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

示例函数：findSongAlbum() (Sample function: findSongAlbum())

Leveraging this interface, we’ll write a function that finds a song album by a title and an artist. It returns a promise that emits a single object of type Album.

利用此界面，我们将编写一个函数，该函数按标题和艺术家查找歌曲专辑。 它返回一个发出一个类型为Album对象的promise。

type Album = {
  title: string
}

Without TypeScript, the function could look like this:

没有TypeScript，该函数可能如下所示：

const findSongAlbum = (title, artist) => {
  // data fetching code...
  
  const albumName = '1989';  return Promise.resolve({
     title: albumName
  });
}

With TypeScript, and leveraging the IQuery interface, you’d pass in Album type as the first Generic parameter to ensure the shape of what the promise emits always matches Album type.

使用TypeScript，并利用IQuery接口，您可以将“ Album类型”作为第一个“通用”参数传递，以确保承诺发出的内容始终与“ Album类型匹配。

const findSongAlbum: IQuery<Album> = (title, artist) => {
  // data fetching code...
  
  const albumName = '1989';  return Promise.resolve({
     title: albumName 
  });
}

在TypeScript 4.0之前 (Before TypeScript 4.0)

You also want to define the parameters and what their types are. In this case title and artist are both strings. You define a new type, Params, and pass that as the second Type for IQuery.

您还想定义参数及其类型。 在这种情况下， title和artist都是字符串。 您定义一个新类型Params ，并将其作为IQuery的第二个类型传递。

On the example, before TypeScript 4.0, Params would be defined as a list of types. Each item in the list defines the type in the same order as the list of arguments. This kind of typing is called Tuple types.

在示例中， 在TypeScript 4.0之前 ，将Params定义为类型列表。 列表中的每个项目以与参数列表相同的顺序定义类型。 这种类型的输入称为元组类型。

type Params: [string, string]const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  // data fetching code...
  
  const albumName = '1989';  return Promise.resolve({
     title: albumName
  });
}

You can see in the Params type above, the first item type is string making the first argument “title” a string. The second, of course, following the same pattern, is string making the second parameter “artist” also a string. This will give us the proper type safety for the arguments list.

您可以在上面的Params类型中看到，第一个项目类型是string ，第一个参数“ title”为string 。 第二个，当然，遵循相同的模式，是string ，第二个参数“ artist”也是一个string 。 这将为我们提供参数列表的适当类型安全。

findSongAlbum() showing useless argument labels

findSongAlbum()显示无用的参数标签

Unfortunately, using Tuple types this way doesn’t give useful type safe labels when you’re using the function. Instead it just lists the arguments as args_0: string, args_1: string. Besides knowing that the first argument is a string, “arg_0” doesn’t tell me that the first parameter should be the “title” of the song I’m searching for.

不幸的是，在使用函数时，以这种方式使用Tuple类型不会提供有用的类型安全标签 。 相反，它只是将参数列出为args_0: string, args_1: string 。 除了知道第一个参数是string ，“ arg_0”并没有告诉我第一个参数应该是我要搜索的歌曲的“标题”。

在TypeScript 4.0之后 (After TypeScript 4.0)

With the TypeScript 4 release candidate we get Labeled Tuple Elements which we can use to get the useful labels in our parameter list.

使用TypeScript 4候选版本，我们可以获得Labeled Tuple Elements ，可以用来在参数列表中获取有用的标签。

Each item in the Params type now gets a label which will show up nicely in your IDE anytime you use the findSongAlbum function.

现在， Params类型中的每个项目都会获得一个标签，该标签会在您findSongAlbum使用findSongAlbum函数时很好地显示在IDE中。

type Params: [title: string, artist: string]const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  // data fetching code...
  
  const albumName = '1989';  return Promise.resolve({
     title: albumName
  });
}

findSongAlbum() showing valuable argument labels

findSongAlbum()显示有价值的参数标签

Now, instead of arg_0: string, we get title: string in our intellisense which tells us what string we need to pass in.

现在，代替arg_0: string ，我们在intellisense中得到title: string ，它告诉我们需要传递什么字符串。

Thanks for reading ❤

感谢您阅读❤

翻译自: https://medium.com/javascript-in-plain-english/typescript-4-0-i-want-a-list-of-generic-params-with-good-labels-c6087d2df935

c函数接口传入未知参数