Added "IntelliSense for TypeScript" (#2326)

Important knowledge to avoid type errors.
This commit is contained in:
Morritz 2022-01-06 17:27:21 +01:00 committed by GitHub
parent 9a4c30989b
commit 7e8f7c7e9e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -29,3 +29,20 @@ fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
> ⚠WARNING⚠:
> Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`.
## IntelliSense for TypeScript
By default, Vite provides type definition for `import.meta.env` in `vite/client.d.ts`. While you can define more custom env variables in `.env.[mode]` files, you may want to get TypeScript IntelliSense for user-defined env variables which prefixed with `PUBLIC_`.
To achieve, you can create an `env.d.ts` in `src` directory, then augment `ImportMetaEnv` like this:
```ts
interface ImportMetaEnv {
readonly PUBLIC_POKEAPI: string
// more env variables...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
```