import.meta.env 的打字稿类型答案

【问题标题】：Typescript Types for import.meta.envimport.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;
    }
  }
}

【问题讨论】：

标签： typescript vue.js vite

【解决方案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
}

【讨论】：