ClientOptions-Schnittstelle im Tnv-Quellcode erklärt

In diesem Artikel analysieren wir die ClientOptions-Schnittstelle, die für das Clientobjekt im Parameter „createEnv“ bereitgestellt wird, einer Funktion in T3 Env. Nachfolgend finden Sie eine einfache Verwendung von t3-env:

export const env = createEnv({
 /*
 * Serverside Environment variables, not available on the client.
 * Will throw if you access these variables on the client.
 */
 server: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
 },
 /*
 * Environment variables available on the client (and server).
 *
 * ? You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
 */
 client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
 },
 /*
 * Due to how Next.js bundles environment variables on Edge and Client,
 * we need to manually destructure them to make sure all are included in bundle.
 *
 * ? You'll get type errors if not all variables from `server` & `client` are included here.
 */
 runtimeEnv: {
 DATABASE_URL: process.env.DATABASE_URL,
 OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 },
});

Wir sind daran interessiert, die Typen/Schnittstellen von Clientobjekten herauszufinden.

client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
 },

Ich konnte sofort erkennen, dass wir diesen Typ im Sinne von Record erwarten könnten, aber die Art und Weise, wie t3-env definiert, ist anders. Schauen Sie sich den folgenden Typ an, der aus dem T3 Env-Quellcode ausgewählt wurde.

export interface ClientOptions<
 TPrefix extends string | undefined,
 TClient extends Record<string, ZodType>,
> {
 /**
 * The prefix that client-side variables must have. This is enforced both at
 * a type-level and at runtime.
 */
 clientPrefix: TPrefix;
/**
 * Specify your client-side environment variables schema here. This way you can ensure the app isn't
 * built with invalid env vars.
 */
 client: Partial<{
 [TKey in keyof TClient]: TKey extends `${TPrefix}${string}`
 ? TClient[TKey]
 : ErrorMessage<`${TKey extends string
 ? TKey
 : never} is not prefixed with ${TPrefix}.`>;
 }>;
}

Sie werden feststellen, dass hierbei ein generischer Typ verwendet wird und TClient vom Typ Record ist, aber der Client nicht über diesen Typ verfügt, sondern stattdessen eine Prüfung vorhanden ist, um sicherzustellen, dass Ihrem im Client definierten Schlüssel das von Ihnen angegebene Präfix vorangestellt wird in ClientPrefix definieren.

Angenommen, Sie haben Ihr Präfix beispielsweise als „NEXT_PUBLIC_“ definiert und versuchen, eine Variable mit einem Schlüssel zu definieren, dem nicht das Präfix „NEXT_PBULIC_“ vorangestellt ist. Dann wird eine Fehlermeldung wie „{Variable} ist nicht“ angezeigt mit dem Präfix „NEXT_PBULIC_“

Dies ist leistungsstark in Frameworks wie Next.js, bei denen Sie nicht versehentlich serverseitige Variablen der Clientseite zugänglich machen möchten.

Überprüfen Sie diese Dokumente – https://env.t3.gg/docs/core#create-your-schema, hier geht es um einen Präfixfehler.

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind wiederverwendbare 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://github.com/t3-oss/t3-env/blob/main/packages/core/src/index.ts#L130

2. https://env.t3.gg/docs/core#create-your-schema

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