React项目中如何基于.env在编译时为变量指定类型？

要实现编译阶段根据.env变量缩小变量类型（从A|B|C|null到具体的A/B/C），并让IDE支持类型跳转，有两种可靠方案：

方案一：预编译脚本生成类型文件（推荐，最可靠） #

通过Node脚本在构建/启动前读取.env变量，自动生成包含具体类型和实例的文件，确保TypeScript静态识别类型，IDE正常跳转。

步骤： #

1. 安装依赖：

npm install dotenv --save-dev

2. 编写生成脚本（比如scripts/generate-x-type.js）：

const fs = require('fs');
const dotenv = require('dotenv');

// 加载.env变量
dotenv.config();

const targetType = process.env.REACT_APP_X_TYPE;
let codeContent = '';

switch(targetType) {
  case 'A':
    codeContent = `
import { A } from '../path-to-your-classes';

export type XType = A;
export const X: XType = new A();
    `.trim();
    break;
  case 'B':
    codeContent = `
import { B } from '../path-to-your-classes';

export type XType = B;
export const X: XType = new B();
    `.trim();
    break;
  case 'C':
    codeContent = `
import { C } from '../path-to-your-classes';

export type XType = C;
export const X: XType = new C();
    `.trim();
    break;
  default:
    codeContent = `
import { A, B, C } from '../path-to-your-classes';

export type XType = A | B | C | null;
export const X: XType = null;
    `.trim();
}

// 写入自动生成的类型文件
fs.writeFileSync('./src/types/XAutoGen.ts', codeContent);

3. 在package.json中添加预执行脚本：

{
  "scripts": {
    "prestart": "node scripts/generate-x-type.js",
    "prebuild": "node scripts/generate-x-type.js"
  }
}

4. 在项目中使用自动生成的变量：

import { X } from './types/XAutoGen';

// 此时X的类型是.env指定的A/B/C，鼠标悬停可直接跳转对应类定义
console.log(X);

注意事项： #

• 将src/types/XAutoGen.ts加入.gitignore，避免提交自动生成的文件。
• 确保.env中REACT_APP_X_TYPE的值严格为A/B/C（区分大小写）。

方案二：TypeScript条件类型结合编译时变量注入 #

利用TypeScript条件类型，结合环境变量的静态声明，让TS在编译时推断具体类型。

步骤： #

1. 声明环境变量类型（在src/env.d.ts中）：

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_X_TYPE: 'A' | 'B' | 'C';
  }
}

2. 创建类型文件（src/types/XType.ts）：

import { A, B, C } from '../path-to-your-classes';

// 根据环境变量推断具体类型
type InferXType = 
  process.env.REACT_APP_X_TYPE extends 'A' ? A :
  process.env.REACT_APP_X_TYPE extends 'B' ? B :
  process.env.REACT_APP_X_TYPE extends 'C' ? C :
  null;

// 初始化变量并断言类型
export const X: InferXType = (() => {
  switch(process.env.REACT_APP_X_TYPE) {
    case 'A':
      return new A() as InferXType;
    case 'B':
      return new B() as InferXType;
    case 'C':
      return new C() as InferXType;
    default:
      return null as InferXType;
  }
})();

注意事项： #

• 此方案依赖TS对process.env变量的静态识别，部分构建工具（如Create React App）会在编译时替换process.env变量，TS能正确推断类型；但如果是自定义Webpack配置，需确保环境变量在TS编译前已注入。
• 若.env变量未严格匹配A/B/C，类型会回退到null。

内容的提问来源于stack exchange，提问作者Peter Chochula