Sponsored

How to Extend Global Object Declaration in Typescript

Jasser Mark Arioste

Jasser Mark Arioste

How to Extend Global Object Declaration in Typescript

Hello! In this article, you'll learn how to extend the global and window objects in node and browser environments respectively.

Sponsored

What is a Global Object in NodeJS?#

Global objects are global in nature, which means they are available in all modules without the need for an import statement. They can be used directly in an application, some examples are console, setTimeout, setInterval, __filename, __dirname, process, etc.

Sponsored

When to extend the Global Object?#

When using Typescript, I usually extend the process.env object so that it is properly typed and so that the editor (I use VSCode) can provide some intellisense/autocomplete.

Sponsored

How to Extend the Global Object?#

To extend the global object, or in this example, add type definitions to the process.env object. You can do the following steps:

  1. Install @types/node
  2. Create a type definition file. 
  3. Use Module Augmentation / Declaration Merging for the ProcessEnv interface
  4. Export an Empty object
  5. Check VSCode autocomplete or intellisense
Sponsored

Step 1: Install @types/node#

This first step is obvious, if you don't have the type definitions for node in your project, the intellisense won't show up.

yarn add @types/node

After that, you should have intellisense or autocomplete when accessing global objects:

NodeJS - Accessing __dirname and __filename global objects
Sponsored

Step 2: Create a Type Definition File#

First, you have to create a type definition file. For example global.d.ts. The Typescript compiler will look for .d.ts files and include them in other type definitions that you may have installed.

touch global.d.ts
1
Sponsored

Step 3: Use Declaration Merging#

The next step is to use declaration merging to add more definitions to whatever interface you need. In this case, it's the ProcessEnv interface.

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      // Define custom environment variables
      SECRET: string | null;
      MY_ENVIRONMENT_VARIABLE: "value1" | "value2" | "value3" | null;
    }
  }
}

export {}
1234567891011
Sponsored

Step 4: Export an Empty Object#

The next step is to export an empty object. 

declare global {
  // ...
}

export {}
12345

By using export {}, we mark the file as an external module. A module is a file that contains at least one import or export statement. When augmenting the global scope, you are required to make the file as a module. Otherwise, the compiler will throw an error:

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.
1
Sponsored

Step 5: Check Autocomplete/Intellisense#

Now, you can easily write your environment variables without worrying about misspellings.

Node JS Extend Global Object Declaration Typescript.
Sponsored

Bonus: Declaring a Global Variable#

You can also declare other global variables in the same type definition file. For example:

// global.d.ts
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      // define environment variables
      SECRET: string | null;
      MY_ENVIRONMENT_VARIABLE: "value1" | "value2" | "value3" | null;
    }
  }

  // outside NodeJS namesepace
  var myVariable: string;
}
export {};
1234567891011121314

Now, you can initialize the variable in your code:

// index.ts
global.myVariable = "Hello, world";
console.log(global.myVariable);
123
Sponsored

Conclusion#

You learned how to extend the global object and declare a global variable by creating a type definition file and using declaration merging. It's a very useful technique and can be applied in multiple scenarios.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.

Sponsored

Resources#

Credits: Image by Charlotte from Pixabay

Share this post!

Related Posts

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.