难以理解这些泛型(?)定义中发生了什么,包括类型参数列表



我正在查看这段代码,来自fastify的打字稿定义。我很难弄清楚这些定义。我知道尖括号适用于泛型,但打字稿教程主要用于 Array 之类的东西,而不是不同的类。此外,其中一些具有多个用逗号分隔的类型。定义是包括所有这些,还是只是一个列表来选择一个?打字稿规范讨论了类型化的参数列表,但没有给出一个很好的例子。我希望有人告诉我这里发生了什么。

this: FastifyInstance<HttpServer, HttpRequest, HttpResponse>,
req: FastifyRequest<HttpRequest, Query, Params, Headers, Body>,
reply: FastifyReply<HttpResponse>,

泛型就是指定类型如何相互关联,而不确切地规定类型是什么。Fastify的类型定义很复杂,所以让我通过更简单的例子。

假设我想创建一个具有 3 个属性、一个值、一个 getValue 函数和一个 setValue 函数的对象。我希望它适用于任何类型的类型,所以第一遍可能是在那里粘贴一堆any。但是如果我这样做了,我可以创建一个带有处理不同类型的getter和setter的对象,我不希望这样。

我想指定类型之间的关系,这是使用这样的泛型完成的:

interface ValueHolder<T> {
value: T,
getValue: () => T,
setValue: (val: T) => void
}

尖括号中的T只是一个占位符。我可以随心所欲地命名它;T只是一个惯例。但重要的是,每个T都引用相同的类型。我还不知道这种类型是什么,但我可以告诉打字稿这个对象的哪些部分必须彼此一致。

如果 value 是一个number,则 getValue 是一个返回number的函数,setValue 是一个接受number的函数。或者如果值是string[],则getValue返回一个string[],而setValue接受string[]。任何类型都可以插入 T,但打字稿将强制我在对象中的所有相关位置使用相同的类型。

下面是使用该接口的示例:

const numberExample: ValueHolder<number> = {
value: 2,
getValue: function () {
return this.value;
},
setValue: function (val: number) {
this.value = 2;
}
}

打字稿将验证并强制我在任何地方使用相同的类型。


对于更复杂的情况,有时需要有多个占位符。因此,与其在尖括号内有一个东西,不如有多个,用逗号分隔。和以前一样,重点是使用这些类型来描述类型如何相互关联。

例如:

interface Converter<InputType, OutputType> {
initialValue: InputType,
mappingFunction: (val: InputType) => OutputType;
calculateResult: () => OutputType;
}
const example: Converter<number, string> = {
initialValue: 6,
mappingFunction: function (val: number) {
return (number + 1).toString();
},
calculateResult: function () {
return this.mappingFunction(this.initialValue);
}
}

正如我所提到的,一些fastify类型定义很复杂,但它基本上是这些原则的延续。例如,它定义了一个名为FastifyMiddleware的类型,然后它有 7 种占位符类型:HttpServer、HttpRequest、HttpResponse、Query、Params、Headers 和 Body。它还为这些类型提供了默认值,因此您可以根据需要省略它们。

之后,它详细描述了这些类型如何相互关联。您可以为这些类型添加任何您喜欢的内容,但打字稿将确保您始终如一地使用它们。

这将是一个评论,但我需要代码格式。这是来自fastify的完整类型定义。这里的等号和后面是什么意思?

type FastifyMiddleware<
HttpServer = http.Server,
HttpRequest = http.IncomingMessage,
HttpResponse = http.ServerResponse,
Query = DefaultQuery,
Params = DefaultParams,
Headers = DefaultHeaders,
Body = DefaultBody
> = (
this: FastifyInstance<HttpServer, HttpRequest, HttpResponse>,
req: FastifyRequest<HttpRequest, Query, Params, Headers, Body>,
reply: FastifyReply<HttpResponse>,
done: (err?: Error) => void,
) => void

相关内容

最新更新