如何在TypeScript中读取终端导出的环境变量

嘿，我来帮你搞定这个问题！你遇到的情况其实挺普遍的，咱们一步步来排查和解决：

1. 先确认环境变量的作用域 #

你在终端执行export my_server_port=1234后，这个变量只在当前终端会话中有效。如果你的TypeScript代码是在另一个终端窗口运行的，或者你重启了终端，那这个变量就会消失。

解决办法：

• 确保运行TS代码的终端和执行export命令是同一个窗口
• 如果想让变量永久生效，可以把export my_server_port=1234添加到你的shell配置文件里（比如~/.bashrc、~/.zshrc或~/.bash_profile），然后执行source ~/.bashrc（对应你的配置文件）让更改立即生效

2. 处理TypeScript的类型问题 #

TypeScript默认不知道process.env上存在my_server_port这个属性，不仅会报类型错误，有时候还可能让你误以为没拿到值（其实Node.js本身是能读取到的，只是TS类型校验不通过）。

要解决类型问题，你可以扩展ProcessEnv接口：

• 在项目根目录创建一个types文件夹，里面新建env.d.ts文件，内容如下：

declare namespace NodeJS {
  interface ProcessEnv {
    my_server_port?: string;
  }
}

• 打开你的tsconfig.json，确保include字段包含这个types目录，比如：

{
  "compilerOptions": {
    // 你的其他编译配置
  },
  "include": ["src/**/*", "types/**/*"]
}

3. 验证读取逻辑 #

现在你可以写一段测试代码来验证：

const serverPort = process.env.my_server_port;
console.log("读取到的端口：", serverPort);

然后在同一个终端里运行代码（比如用ts-node your-file.ts直接运行，或者编译后用node dist/your-file.js），应该就能看到输出读取到的端口：1234了。

注意：process.env里的所有环境变量都是字符串类型，如果需要数字类型的端口，记得手动转换：

const serverPort = Number(process.env.my_server_port);

额外提醒：如果用构建工具（如Vite/Webpack） #

如果你是在前端项目中用Vite、Webpack这类工具，它们有自己的环境变量处理规则：

• Vite中需要用import.meta.env代替process.env，且变量名要以VITE_开头（比如VITE_MY_SERVER_PORT=1234）
• Webpack中则需要配置DefinePlugin来注入环境变量

内容的提问来源于stack exchange，提问作者Anudeep Chandra