typescript - import.meta.env 的打字稿类型

Question

我现在正在使用将环境变量注入到import.meta.env.

我以前能够创建一个文件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;
    }
  }
}

Answer 1

我有类似的问题并通过

tsconfig.json

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

已vite作为开发依赖项安装。

Answer 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_因此这些环境变量在应用程序中都不可用。

Answer 3

我通过使用以下方法让它工作 -

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

Answer 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
  }
}

Answer 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
}