ホームページ > ウェブフロントエンド > jsチュートリアル > Tnv ソース コードの ClientOptions インターフェイスの説明

Tnv ソース コードの ClientOptions インターフェイスの説明

Barbara Streisand
リリース: 2024-12-01 03:44:08
オリジナル
403 人が閲覧しました

この記事では、T3 Env の関数である createEnv パラメーターでクライアント オブジェクトに提供される ClientOptions インターフェイスを分析します。 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,
 },
});
ログイン後にコピー

クライアント オブジェクトのタイプ/インターフェイスを調べることに興味があります。

client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
 },
ログイン後にコピー

すぐに、この型は Record に沿って期待できることがわかりましたが、t3-env の定義方法は異なります。 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}.`>;
 }>;
}
ログイン後にコピー

これはジェネリック型を使用しており、TClient の型は Record であることがわかりますが、クライアントにはこの型がありません。代わりに、クライアントで定義されたキーにプレフィックスが付けられていることを確認するためのチェックが行われます。 ClientPrefix.

で定義します。

たとえば、プレフィックスを「NEXT_PUBLIC_」として定義し、「NEXT_PBULIC_」のプレフィックスが付いていないキーで変数を定義しようとすると、「{variable} is not」という行に沿ったエラーが表示されます。接頭辞「NEXT_PBULIC_」

これは、サーバー側の変数を誤ってクライアント側に公開したくない Next.js のようなフレームワークで強力です。

このドキュメントを確認してください — https://env.t3.gg/docs/core#create-your-schema、これはプレフィックス エラーについて説明しています。

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

ClientOptions interface in Tnv source code explained

参考文献:

  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

以上がTnv ソース コードの ClientOptions インターフェイスの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート