Antara muka ClientOptions dalam kod sumber Tnv dijelaskan

Dalam artikel ini, kami menganalisis antara muka ClientOptions yang disediakan untuk objek klien dalam parameter createEnv, fungsi dalam T3 Env. Penggunaan ringkas t3-env disediakan di bawah:

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

Kami berminat untuk mengetahui jenis/antara muka objek pelanggan.

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

Seterusnya, saya dapat tahu kita boleh menjangkakan jenis ini sepanjang baris Rekod, tetapi cara t3-env mentakrifkan adalah berbeza. Lihat jenis di bawah yang dipilih daripada kod sumber 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}.`>;
 }>;
}

Anda akan mendapati bahawa ini menggunakan jenis generik dan TClient adalah daripada jenis Rekod, tetapi pelanggan tidak mempunyai jenis ini, sebaliknya ia mempunyai semakan untuk memastikan kunci anda yang ditakrifkan dalam klien diawali dengan apa sahaja yang anda tentukan dalam ClientPrefix.

Katakanlah, sebagai contoh, anda telah mentakrifkan awalan anda sebagai “NEXT_PUBLIC_” dan anda cuba mentakrifkan beberapa pembolehubah dengan kunci yang tidak diawali dengan “NEXT_PBULIC_”, anda akan melihat ralat di sepanjang baris “{variable} is not diawali dengan “NEXT_PBULIC_”

Ini berkuasa dalam rangka kerja seperti Next.js yang mana anda tidak mahu mendedahkan pembolehubah bahagian pelayan secara tidak sengaja kepada bahagian klien.

Semak dokumen ini — https://env.t3.gg/docs/core#create-your-schema, ini bercakap tentang ralat awalan.

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen boleh guna semula, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan:

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

Atas ialah kandungan terperinci Antara muka ClientOptions dalam kod sumber Tnv dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!