How to create a truly global variable in TypeScript without window?

Product Support LT Browser
#1

How can I create a global variable in TypeScript? In JavaScript, I can define a variable globally and access it across files. For example:

something = 'testing';

And then use it in another file:

if (something === 'testing')

In TypeScript, I tried using the window object, like this:

In a .d.ts file:

interface Window { something: string; }

In main.ts:

window.something = 'testing';

And in another file: if (window.something === 'testing')

This works, but I want to avoid using window. and have something be truly global. How can I achieve this in TypeScript? (I’m trying to set up global logging for my application.)

#2

To create a global variable in TypeScript without using the window object, you can use these approaches:

Declare a Global Variable in a .d.ts File: Create a global variable using a TypeScript declaration file. This approach allows you to declare a variable that is accessible globally across your project.

In a globals.d.ts file:

declare const something: string;

In one of your .ts files:

const something: string = 'testing';

n other .ts files:

if (something === 'testing') {
    // Use the global variable
}
#3

Use a Singleton Pattern with a Global Class: Define a global class or module with static properties or methods to simulate global access. This is a more controlled approach compared to traditional global variables.

In GlobalSettings.ts:

export class GlobalSettings {
    static something: string = 'testing';
}
In other files:

import { GlobalSettings } from './GlobalSettings';

if (GlobalSettings.something === 'testing') {
    // Use the global-like setting
}
#4

In my experience, one effective way to handle global variables in TypeScript is by augmenting the global namespace. This approach is similar to using window, but it feels cleaner since you’re avoiding direct manipulation of the window object.

What I’ve found works well is extending the global namespace to include your custom global variables. Here’s how you can do it:

In a .d.ts file:

declare global {
    var something: string;
}

In your .ts file:

globalThis.something = 'testing';

And then in other .ts files, you can use it like this:

if (globalThis.something === 'testing') {
    // Use the global variable
}

In my opinion, this method offers a more structured way to manage global variables, and while there are trade-offs, it’s really about what fits your specific project needs.