Типы машинописных текстов для import.meta.env

Question

Теперь я использую фреймворк (vite), который вводит переменные среды в 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

Я заставил его работать, используя следующее -

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

Answer 2

У меня были похожие проблемы, и я решил их

tsconfig.json

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

Иметь vite установлен как зависимость разработчика.

Answer 3

Это задокументировано здесь: 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_ поэтому ни одна из этих переменных среды не доступна в приложении.

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

URL-адрес этой документации, связанный с приведенным выше ответом , был обновлен .

Дальше, env.d.tsдолжны быть размещены в вашем src/каталог, и вам нужна ссылочная строка в верхней части файла.

Полный рабочий пример выглядит следующим образом:

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

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

---

Использование префикса переменной, отличного от VITE_

Если вы не хотите использовать префикс переменной по умолчанию, вы можете изменить это в конфигурации Vite :

      {
  envPrefix: 'YOURPREFIX_',
}

Answer 6

Если вы используете SvelteKit v1.0.0-next.120 и Vite 2.4.0, env должен быть свойством ImportMeta в global.d.ts. Вот пример:

      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 7

У меня была аналогичная проблема при попытке использовать переменные среды с помощью машинописного текста с Vite в React js. Решаю следующим образом, в файл "vite-env.d.ts" помещаю следующее:

      interface ImportMeta {
  env: {
    email: string
    password: string
  }
}

Answer 8

Я столкнулся с тем, что пример из документации vite не работает, если вам нужно импортировать другой тип.

Скажи типа .

      interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: import('./<your_path>/MyCustomType').MyCustomType

  // Optionally describe the original values from vite, needed if you remove <reference types="vite/client" /> line as I did
  readonly BASE_URL: string;
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
  readonly SSR: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

PS также рекомендую удалить/// <reference types="vite/client" />линия, потому что в противном случае типVITE_CUSTOM_ENV_VARIABLEбудетMyCustomTypeилиany;

Answer 9

Самый чистый подход, который я нашел, заключался в том, чтобы в основном расширить их класс и добавить наши ключи отдельно:

      // env.d.ts

/**
 * Our environment variables.
 * 
 * (See https://stackoverflow.com/a/75272079/3423324)
 */
interface ImportMetaEnvCustom extends Readonly<Record<string, string>> {
  readonly VITE_API_SERVER_HOST: string,
  readonly VITE_API_SERVER_PORT: string
}

interface ImportMeta extends import('vite/types/importMeta').ImportMeta {
  // additionally pull in the original values from vite, so you won't need <reference types="vite/client" /> any longer.
  readonly env: ImportMetaEnvCustom & import('vite/types/importMeta').ImportMetaEnv
}

В этом примереVITE_API_SERVER_HOSTиVITE_API_SERVER_PORTтеперь документированы должным образом.

Вы также можете сохранить переменные Vite по умолчанию, такие какBASE_URL, а также другиеmeta.*подсказки, напримерimport.meta.glob()