Added "IntelliSense for TypeScript" (#2326)astro@0.22.7

Important knowledge to avoid type errors.

1 files changed, 17 insertions, 0 deletions

diff --git a/docs/src/pages/en/guides/environment-variables.md b/docs/src/pages/en/guides/environment-variables.md
index 30ab36398..1d3b9cfef 100644
--- a/docs/src/pages/en/guides/environment-variables.md
+++ b/docs/src/pages/en/guides/environment-variables.md
@@ -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
+}
+```