import.meta.env 的打字稿类型

Question

我现在正在使用一个将环境变量注入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;
    }
  }
}

Answer 1

记录在此处：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 2

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

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

Answer 3

如果您使用的是 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 4

根据此处的文档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
}

Answer 5

我遇到了类似的问题，通过

解决了

tsconfig.json

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

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

Answer 6

URL 到上述答案中链接到的文档 has been updated。

此外，env.d.ts 应该放在您的 src/ 目录中，您需要在文件顶部有一个参考字符串。

一个完整的工作示例如下：

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

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

使用 `VITE_`

以外的变量前缀

如果不想使用默认变量前缀，you can change this in your Vite config:

{
  envPrefix: 'YOURPREFIX_',
}

import.meta.env 的打字稿类型

Typescript Types for import.meta.env

typescript

vue.js

vite

使用 `VITE_`

import.meta.env 的打字稿类型

Typescript Types for import.meta.env

typescript

vue.js

vite

使用 VITE_

使用 `VITE_`