httpBatchLink-Typen im tRPC-Quellcode erklärt

In diesem Artikel analysieren wir die im tRPC-Quellcode gefundenen httpBatchLink-Typen. Aber zuerst möchten Sie es wissen

Was ist httpBatchLink.

httpBatchLink:

Unten finden Sie ein Beispiel aus der tRPC-Vanilla-Setup-Anleitung.

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
 links: [
 httpBatchLink({
 url: 'http://localhost:3000/trpc',
 // You can pass any HTTP headers you wish here
 async headers() {
 return {
 authorization: getAuthCookie(),
 };
 },
 }),
 ],
});

httpBatchLink wird bei der Konfiguration von tRPC verwendet. Ich war neugierig auf die Typen und begann, mir den Quellcode anzusehen. Es gibt eine Datei mit dem Namen httpBatchLink.ts in packets/client/src/links/httpBatchLinks.ts, die zum Zeitpunkt des Schreibens dieses Artikels etwa 137 Codezeilen umfasst.

httpBatchLink-Funktionsdefinition:

export function httpBatchLink<TRouter extends AnyRouter>(
 opts: HTTPBatchLinkOptions<TRouter['_def']['_config']['$types']>,
): TRPCLink<TRouter> {

Opts sind vom Typ HTTPBatchLinkOptions,. Folgen wir den Unbekannten. Ich würde mir die Typdefinitionen ansehen für:

- HTTPBatchLinkOptions

- TRouter

HTTPBatchLinkOptions-Typ

Sie finden den HTTPBatchLinkOptions-Typ, der in packets/client/src/links/HTTPBatchLinkOptions.ts definiert ist

export type HTTPBatchLinkOptions<TRoot extends AnyClientTypes> =
 HTTPLinkBaseOptions<TRoot> & {
 maxURLLength?: number;
 /**
 * Headers to be set on outgoing requests or a callback that of said headers
 * @see http://trpc.io/docs/client/headers
 */
 headers?:
 | HTTPHeaders
 | ((opts: {
 opList: NonEmptyArray<Operation>;
 }) => HTTPHeaders | Promise<HTTPHeaders>);
 };

ist ein generischer Typ, der AnyClientTypes erweitert. Das bedeutet, dass der generische Typ mindestens die Eigenschaften und die Struktur des Typs haben muss, den er erweitert.

AnyClientTypes:

AnyClientTypes

export type AnyClientTypes = Pick<AnyRootTypes, 'errorShape' | 'transformer'>;

Was ist hier „Pick“? Ich habe in TS-Dokumenten nach „Pick“ gesucht und Folgendes gefunden:

Konstruiert einen Typ, indem der Satz von Eigenschaftenschlüsseln (String-Literal oder Vereinigung von String-Literalen) aus Typ ausgewählt wird.

Beispiel:

interface Todo {
 title: string;
 description: string;
 completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
 title: "Clean room",
 completed: false,
};

AnyRootTypes:

AnyRootTypes

export type AnyRootTypes = CreateRootTypes<{
 ctx: any;
 meta: any;
 errorShape: any;
 transformer: any;
}>;

Es könnte verwirrend sein, aber hier gilt die wichtige Regel, dass Typen in Dateien definiert werden, sodass sie zusammen mit den Funktionen gespeichert werden, die diese Typen verwenden, diese Typen aber auch exportieren, damit sie bei Bedarf in der gesamten Codebasis verwendet werden können.

Das beste Beispiel hierfür ist, dass HTTPLinkBaseOptions, die in httpUtils.ts definiert sind, in derselben Datei und auch in packets/client/src/links/HTTPBatchLinkOptions.ts verwendet werden

In einigen Fällen wie:

• packages/client/src/links/HTTPBatchLinkOptions.ts

• packages/server/src/unstable-core-do-not-import/clientish/inferrable.ts

In diesen Dateien sind nur Typen definiert, es gibt hier keine anderen Funktionen.

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind resubale Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenzen:

1. https://trpc.io/docs/client/vanilla/setup

2. https://github.com/trpc/trpc/blob/next/packages/client/src/links/httpBatchLink.ts#L22

3. https://github.com/trpc/trpc/blob/next/packages/client/src/links/HTTPBatchLinkOptions.ts#L6

4. https://github.com/trpc/trpc/blob/next/packages/client/src/links/internals/httpUtils.ts#L22

Das obige ist der detaillierte Inhalt vonhttpBatchLink-Typen im tRPC-Quellcode erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!