TypeScript 中环境变量的使用方法及常见错误

简介

在 TypeScript 开发中，我们常常需要使用环境变量来控制一些逻辑。本文将介绍 TypeScript 中环境变量的使用方法，以及一些常见的错误和解决方法。

环境变量的定义

在 TypeScript 中，可以通过 .env 文件来定义环境变量。这个文件可以放在项目的根目录下，也可以放在 .env. 开头的文件名下，比如 .env.development, .env.production 等。

以下是一个 .env 文件的示例：

NODE_ENV=development
API_URL=http://localhost:3000/api/v1
DEBUG=true

环境变量的使用

我们可以通过 process.env 对象来访问环境变量的值。例如，访问 NODE_ENV 环境变量的值：

const env = process.env.NODE_ENV;
console.log(env); // output: development

在 TypeScript 中，想要使用环境变量，需要先声明一下这个变量的类型。比如，我们可以在一个 .d.ts 文件中声明：

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: "development" | "production";
    API_URL: string;
    DEBUG: string;
  }
}

这样，我们就可以在代码中使用环境变量了。例如，获取 API_URL 环境变量的值：

const apiUrl = process.env.API_URL;
console.log(apiUrl); // output: http://localhost:3000/api/v1

常见错误

1. 环境变量不存在

在 TypeScript 中，访问未定义的环境变量会报错。这时，我们需要在定义环境变量的地方添加默认值或者判断这个环境变量是否存在。

以下是一个添加默认值的示例：

const apiUrl = process.env.API_URL || "https://example.com";
console.log(apiUrl);

以下是一个判断环境变量是否存在的示例：

if (!process.env.API_URL) {
  throw new Error("API_URL environment variable not set.");
}
const apiUrl = process.env.API_URL;
console.log(apiUrl);

2. 环境变量类型错误

在 TypeScript 中，我们需要声明每个环境变量的类型，否则会报错。我们需要仔细检查每个环境变量的类型是否正确。

以下是一个类型错误的示例：

const debug = process.env.DEBUG; // string 类型
if (debug === true) { // 期望是 boolean 类型
  console.log("Debug mode on.");
}

正确的方式是将 DEBUG 声明为字符串类型：

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: "development" | "production";
    API_URL: string;
    DEBUG: "true" | "false";
  }
}

总结

使用环境变量是 TypeScript 开发中必不可少的一部分。通过本文，我们学习了环境变量的定义和使用方法，以及常见的错误和解决方法。希望本文对您有帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c170f968c7c53b07464ba