import.meta.env 的打字稿类型

Posted 2023-02-22

【中文标题】import.meta.env 的打字稿类型

【英文标题】：Typescript Types for import.meta.env

【发布时间】：2021-05-08 10:01:06

【问题描述】：

我现在正在使用将环境变量注入import.meta.env 的框架（vite）。

我之前能够创建一个文件env.d.ts 来为process.env 提供类型

declare global 
  namespace NodeJS 
    interface ProcessEnv 
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    
  

我尝试了以下方法但不起作用。

declare global 
  namespace NodeJS 
    interface ImportMeta 
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    
  

【参考方案1】：

我也遇到过类似的问题，解决了

tsconfig.json

  ...
  "compilerOptions": 
    ...
    "target": "ESNext",
    "types": ["vite/client"]
  

将vite 安装为开发依赖项。

【讨论】：

可以确认这在 vite/laravel 安装中对我有用。

可能是干净的解决方案 :) 谢谢队友

【参考方案2】：

记录在这里：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#support-for-importmeta

所以你快到了：

interface ImportMeta 
  env: 
    GITHUB_AUTH_TOKEN: string;
    NODE_ENV: 'development' | 'production';
    PORT?: string;
    PWD: string;
  ;

但请注意，在 vite 中，所有环境变量都必须以 VITE_ 为前缀，因此这些环境变量在应用程序中均不可用。

【讨论】：

我收到 ts 错误，我不确定如何修复 - All declarations of 'env' must have identical modifiers.

有趣，它对我有用，但我仍在使用 vite 1.0，也许这随着新的 vite 2.0 版本而改变（我实际上很确定这可能是问题：github.com/vitejs/vite/blob/… )?

【参考方案3】：

我通过以下方式让它工作 -

interface ImportMetaEnv 
  VITE_PORT?: string;
  VITE_AUTH_TOKEN?: string;

【讨论】：

你能解释一下吗？比如 env.d.ts 是如何提供给 process.env 的，你只是创建文件还是必须告诉 vite 将它加载到某个地方？跨度>

@mentorgashi 只需要.d.ts 文件。无需配置vite

【参考方案4】：

如果您使用的是 SvelteKit v1.0.0-next.120 和 Vite 2.4.0，env 必须是 global.d.ts 中 ImportMeta 的属性。这是一个例子：

interface ImportMeta 
  env: 
    VITE_DATABASE_URL?: string
    VITE_WEB_URL?: string
    VITE_BRAINTREE_GATEWAY?: string
    VITE_BRAINTREE_DESCRIPTOR?: string
    VITE_RECAPTCHA_SECRET_KEY?: string
    VITE_EMAIL_FROM?: string
    VITE_EMAIL_ADMINS?: string
    VITE_SEND_IN_BLUE_KEY?: string
    VITE_SEND_IN_BLUE_URL?: string
    VITE_RECAPTCHA_SITE_KEY?: string
  

【参考方案5】：

根据https://vitejs.dev/guide/env-and-mode.html#intellisense 此处的文档，您可以执行以下操作：

// env.d.ts
interface ImportMetaEnv extends Readonly<Record<string, string>> 
  readonly VITE_APP_TITLE: string
  // more env variables...


interface ImportMeta 
  readonly env: ImportMetaEnv