Interface ClientOptions dans le code source de Tnv expliquée

Dans cet article, nous analysons l'interface ClientOptions fournie pour l'objet client dans le paramètre createEnv, une fonction de T3 Env. Une utilisation simple de t3-env est fournie ci-dessous :

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,
 },
});

Nous souhaitons connaître les types/interfaces d'objet client.

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

Tout de suite, je pourrais dire que nous pourrions nous attendre à ce type dans le sens de Record, mais la façon dont t3-env définit est différente. Regardez le type ci-dessous sélectionné dans le code source de T3 Env.

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}.`>;
 }>;
}

Vous constaterez que cela utilise un type générique et que TClient est de type Record, mais le client n'a pas ce type, à la place, il a une vérification en place pour garantir que votre clé définie dans le client est préfixée par ce que vous définir dans ClientPrefix.

Disons, par exemple, que vous avez défini votre préfixe comme « NEXT_PUBLIC_ » et que vous essayez de définir une variable avec une clé qui n'est pas préfixée par « NEXT_PBULIC_ », vous verrez une erreur du type « {variable} n'est pas préfixé par « NEXT_PBULIC_ »

Ceci est puissant dans des frameworks comme Next.js où vous ne voulez pas exposer accidentellement les variables côté serveur au côté client.

Consultez cette documentation — https://env.t3.gg/docs/core#create-your-schema, cela parle d'une erreur de préfixe.

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants réutilisables, construits avec tailwind, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!