How To Create A Global Variable In TypeScript?

Tim Mouskhelichvili
Tim Mouskhelichvili
• 2 minutes to read

Sometimes, a TypeScript developer may want to add a global variable to the code base. Luckily, this is easy to do.

To add a new global variable to TypeScript, you can:

  • Augment the global object (when running in a Node.js context).
  • Augment the window object (when running in a browser context).

This article explains both methods and shows how to code them with examples.

Let's get to it 😎.

typescript global variable

Method #1 - Augment the global object (Node.js)

If you are running your TypeScript code in a Node.js context, the easiest way to declare a global variable involves using the global object.

Here is how to do it:

1. Add the new property to the global object.

typescriptglobal.__GLOBAL_VAR__ = {
    name: 'Global'
};

If you get the error: Cannot find name 'global', add the node type to the compilerOptions.types on your tsconfig.json file.

However, you will still get an error because the new property doesn't exist inside TypeScript's definition of the global object. That's why we need to augment it.

2. Create a new file called definitions.d.ts that will hold all the definitions.

3. Augment the global object with the new property definition inside the new file.

typescriptdeclare global {
  var __GLOBAL_VAR__: {
        name: string;
  };
}

export {};

You can now use this variable anywhere in your TypeScript code.

The best Web Development course in 2023! 👉 Learn Web Development

Method #2 - Augment the window object (Browser)

If you are running your TypeScript code inside a browser, the easiest way to declare a global object involves using the JavaScript window object.

Here is how to do it:

1. Add the new property to the window object.

typescriptwindow.__GLOBAL_VAR__ = {
    name: 'Global'
};

However, you will get this error: Property '__GLOBAL_VAR__' does not exist on type 'Window & typeof globalThis'.

This error happens because the property doesn't exist inside the window interface.

Let's augment the window interface to fix this error.

2. Create a new definition file called definitions.d.ts.

3. Add the property to the window object definition inside the new file.

typescriptdeclare global {
  interface Window {
    __GLOBAL_VAR__: {
        name: string;
    };
  }
}

export {};

You can now use the __GLOBAL_VAR__ property anywhere on your HTML page.

Final thoughts

As you can see, adding a global variable to your TypeScript code is easy.

Depending on the running context, you can augment the window or the global object with the new property.

typescript global variable

Here are some other TypeScript tutorials for you to enjoy:

The best Web Development course in 2023! 👉 Learn Web Development

Comments (1)
Reply to:
Paulo July 10, 2023 06:41AM
The global method didn't work for my NextJS and TypeScript environmentI am trying to make `useState` and `useMemo` available globally, without needing to import in every file. Maybe this is a bad idea but I wanted to try lol
REPLY