Added "IntelliSense for TypeScript" (#2326)
Important knowledge to avoid type errors.
This commit is contained in:
parent
9a4c30989b
commit
7e8f7c7e9e
1 changed files with 17 additions and 0 deletions
|
@ -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
|
||||
}
|
||||
```
|
||||
|
|
Loading…
Reference in a new issue