How To Define Types For Process.env In TypeScript

If you don’t know how to define types for process.env in TypeScript, this tutorial will help you. Check out the information now.

Define types for process.env in TypeScript

Process.env is often used to store variables in each working environment.

The fact that you save in the environment variable, all JavaScript files can get its value. You just need to edit the environment variables instead of having to open each file to edit. This will save your time in developing the system as well as fixing bugs if there are errors.

Here I will show you how to define types for process.env in TypeScript:

First, you need to declare the types in the global namespace in the file ‘environment.d.ts‘.

Open the ‘src’ folder, and create a subfolder named ‘types’. In ‘types’, create the ‘environment.d.ts‘ file. Declare properties for the ProcessEnv interface. For example, here is your environment.d.ts:

export {}

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      BACKEND_URL: string;
      DB_PORT: number;
      DB_NAME: string;
      ENV: 'production' | 'development';
    }
  }

}

In this example, we declare four properties: BACKEND_URL, DB_PORT, DB_NAME, ENV, and their type. This is just a concrete example. These properties may be different in your project.

Finally, the ‘export {}‘ statement is used to export it as an external module.

After successfully declaring the properties for interface ProcessEnv, you can now try to access them. The system will now automatically complete them for you. If you do not get autocompletion, open the ‘tsconfig.json‘ file and add a path to directory ‘types‘, then the ‘tsconfig.json‘ should look like this:

{
  "compilerOptions": {
    …
    "typeRoots": ["./node_modules/@types", "./src/types"]
    …
  }
}

Sometimes, it can be helpful if you restart the IDE before continuing.

We must install the ‘dotenv’ package before adding values ​​to the specific properties of the process.env object. Otherwise, you will get an undefined value when accessing. Open the terminal and run these commands::

npm install dotenv
npm install -D @types/node

Create a new file called ‘.env‘ in your root directory. Here, you can set values to properties:

BACKEND_URL: "http://localhost:8080";
DB_PORT: 3306;
DB_NAME: "Employees_Database";
ENV: "development";

Now, try accessing the properties of the process.env object and see what we got:

In index.ts:

import 'dotenv/config';

let backend_url = process.env.BACKEND_URL
let database_port = process.env.DB_PORT
let database_name = process.env.DB_NAME
let environment = process.env.ENV

console.log(backend_url);
console.log(database_port);
console.log(database_name);
console.log(environment);

Output:

"http://localhost:8080"
3306
Employees_Database
development

As a final point, you have successfully accessed the properties of the process.env object. However, remember to import the “dotenv” package before you start.

Summary

You have learned how to define types for process.env in TypeScript. I hope the information in this article will help you in your project. If you have any questions, please comment below. We will answer as possible. Thank you for reading!

Maybe you are interested:

• Extend an Interface excluding a Property in TypeScript
• Adding Types to Refs in React using TypeScript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js