在前端开发中，有时需要根据当前运行环境的不同，加载不同的配置文件或者使用不同的 API 地址。为了实现这一点，我们可以利用环境变量来区分不同的环境，并在代码中使用它们。本文将介绍如何在 TypeScript 中进行环境变量操作。
如何设置环境变量
在 TypeScript 中，我们可以通过以下几种方式设置环境变量：
1. 在 package.json 中设置
可以在 package.json 文件中设置 env 属性，例如：
"env": {
"NODE_ENV": "production",
"API_URL": "https://api.example.com"
}然后，在代码中可以通过 process.env.NODE_ENV 和 process.env.API_URL 来读取这两个环境变量。
2. 使用 cross-env 工具设置
如果你想要在命令行中设置环境变量，可以使用 cross-env 工具，它可以跨平台地为命令行设置环境变量。例如：
cross-env NODE_ENV=production API_URL=https://api.example.com ts-node app.ts
这里的 ts-node app.ts 是你要运行的 TypeScript 文件。
3. .env 文件
以上两种方式都需要手动设置环境变量，而且还容易出错。另一种更好的方式是使用一个名为 .env 的文件来存放你的环境变量。可以使用 dotenv 这个工具来加载这些变量，例如：
-- -------------------- ---- ------- -- ---- -- ------------------- ------------------------------- -- ------ -- ------ ------ ---- --------- ---------------- ---------------------------------- ---------------------------------
如何在代码中使用环境变量
一旦设置好了环境变量，就可以在代码中使用它们了。以下是一些示例代码：
1. 加载不同的配置文件
const config = process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json');2. 使用不同的 API 地址
const apiUrl = process.env.API_URL;
fetch(`${apiUrl}/users`).then(response => {
// ...
});总结
本文介绍了在 TypeScript 中进行环境变量操作的三种方式：在 package.json 中设置、使用 cross-env 工具设置、和使用 .env 文件。此外还给出了如何在代码中使用环境变量的示例代码。通过掌握这些技能，我们可以更加方便地在不同环境下开发和调试应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502769995b1f8cacdfbe914