Vite项目中为import.meta.env配置TypeScript类型的正确写法

你之前的写法存在两个本质错误，导致类型定义完全不生效：

• 错把ImportMeta挂到了NodeJS命名空间下：全局范围内的ImportMeta接口属于TypeScript内置的顶层类型，根本不属于NodeJS命名空间，你在这个命名空间下定义的接口不会和真实的全局ImportMeta做类型合并，TS完全识别不到。毕竟NodeJS.ProcessEnv本身是正确的命名空间归属，但ImportMeta不是
• 类型层级和运行时结构不匹配：Vite的环境变量是挂载在import.meta的env属性上，不是直接挂在import.meta根节点上，你之前把变量定义在ImportMeta的根层级，和实际取值的路径不对应，自然拿不到类型提示

在项目根目录的env.d.ts文件中按照如下规则编写即可：

/// <reference types="vite/client" />

// 定义自定义环境变量的类型结构
interface ImportMetaEnv {
  readonly GITHUB_AUTH_TOKEN: string
  readonly NODE_ENV: 'development' | 'production'
  readonly PORT?: string
  readonly PWD: string
  // 补全Vite内置的通用环境变量类型，避免TS提示缺失
  readonly BASE_URL: string
  readonly PROD: boolean
  readonly DEV: boolean
}

// 扩展全局ImportMeta接口，绑定自定义的env类型
interface ImportMeta {
  readonly env: ImportMetaEnv
}

• 必须保留开头的/// <reference types="vite/client" />，这行是引入Vite官方提供的客户端基础类型，避免和内置的环境变量类型产生冲突
• 如果你的env.d.ts文件里写了任何import/export语句，就要把上述两个接口定义放到declare global {}块中，不然这些类型会被限制在模块作用域，全局取不到类型提示
• 所有自定义环境变量统一写在ImportMetaEnv接口里，不要直接在ImportMeta上定义属性

内容的提问来源于stack exchange，提问作者hangc