Home > Web Front-end > JS Tutorial > body text

EnvOptions type in Tnv source code explained

Susan Sarandon
Release: 2024-11-14 20:43:02
Original
586 people have browsed it

In this article, we are going to examine the EnvOptions type in T3 Env source code. In case you are wondering what’s T3 Env or EnvOptions,

T3 Env provides validation for type-safe environment variables using zod. you use createEnv function and provide zod validation for your server and client env variables as shown in below example.

// src/env.mjs
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";
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,
 },
});
Copy after login

EnvOptions type in Tnv source code explained

This createEnv has the below type shown defined in T3 Env source code:

export function createEnv<
 TPrefix extends TPrefixFormat,
 TServer extends TServerFormat = NonNullable<unknown>,
 TClient extends TClientFormat = NonNullable<unknown>,
 TShared extends TSharedFormat = NonNullable<unknown>,
 const TExtends extends TExtendsFormat = [],
>(
 opts: EnvOptions<TPrefix, TServer, TClient, TShared, TExtends>,
): CreateEnv<TServer, TClient, TShared, TExtends> {
 const runtimeEnv = opts.runtimeEnvStrict ?? opts.runtimeEnv ?? process.env;
Copy after login

Function parameter here is opts with type EnvOptions

EnvOptions type in Tnv source code explained

export type EnvOptions<
 TPrefix extends string | undefined,
 TServer extends Record<string, ZodType>,
 TClient extends Record<string, ZodType>,
 TShared extends Record<string, ZodType>,
 TExtends extends Array<Record<string, unknown>>,
> =
 | (LooseOptions<TShared, TExtends> &
 ServerClientOptions<TPrefix, TServer, TClient>)
 | (StrictOptions<TPrefix, TServer, TClient, TShared, TExtends> &
 ServerClientOptions<TPrefix, TServer, TClient>);
Copy after login

EnvOptions is a generic type. Server object in opts passed has the generic type — TServer extends Record

// server type is TServer that is a Record with key being string 
// and value being ZodType
server: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
},
// client type is TClient that is a Record with key being string 
// and value being ZodType
client: {
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
},
Copy after login

I barely scratched the surface here, this feels like an advanced Typescript usecase as this EnvOptions type returns:

| (LooseOptions<TShared, TExtends> &
 ServerClientOptions<TPrefix, TServer, TClient>)
| (StrictOptions<TPrefix, TServer, TClient, TShared, TExtends> &
 ServerClientOptions<TPrefix, TServer, TClient>);
Copy after login

Check out the LooseOptions and ServerClientOptions in t3-env source code.

About us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed reusable Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to discuss your project.

EnvOptions type in Tnv source code explained

References:

1. https://github.com/t3-oss/t3-env/blob/main/packages/core/src/index.ts#L222

2. https://github.com/t3-oss/t3-env/blob/main/packages/core/src/index.ts#L183

3. https://env.t3.gg/

The above is the detailed content of EnvOptions type in Tnv source code explained. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template