Expanding universal types (such as "Window") within a TypeScript module

Question

Expanding universal types (such as "Window") within a TypeScript module

When working with TypeScript and not using modules, it is possible to extend the global Window object. For instance, the following code will compile:

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0;
++window.myCounter;

function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)
}

However, if the function outputLoadingDetails is prefixed with export, it seems to convert the file into a module. This results in a compiler error when trying to access window.myCounter.

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0; // ERROR: property 'MyCounter' does not exist on type `Window`
++window.myCounter;                       // ERROR: property 'MyCounter' does not exist on type `Window`

export function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)  // ERROR: property 'MyCounter' does not exist on type `Window`
}

It seems that the interface declaration no longer extends the global Window type.

An alternate solution is to place the interface declaration in a separate *.d.ts file and reference it from within the module.

Now the question arises: Is there a way to extend the Window interface within the module code itself?

typescript typescript-typings

Answer 1

Answer №1

A simple solution is to enclose the interface within a global declaration like this:

declare global {
    interface Window {
        myCounter: number;
    }
}

You can extend the global scope from modules by using declare global declarations.

For more details, check out this resource.

** Remember to treat the file as a module (include an import or export statement); if not, you can add an empty export {} block.

Answer 2

A simple solution is to enclose the interface within a global declaration like this:

declare global {
    interface Window {
        myCounter: number;
    }
}

You can extend the global scope from modules by using declare global declarations.

For more details, check out this resource.

** Remember to treat the file as a module (include an import or export statement); if not, you can add an empty export {} block.

Answer 3

Answer №2

Adjusting the global declaration was not ideal for me because any changes made would affect other files as well.

To resolve this issue, I implemented the following solution:


interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

Answer 4

Adjusting the global declaration was not ideal for me because any changes made would affect other files as well.

To resolve this issue, I implemented the following solution:


interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

Expanding universal types (such as "Window") within a TypeScript module

Answer №1

Answer №2

Similar questions

What is the best way to retrieve messages from a websocket server and display them on an Angular component

Steps for generating an instance of a concrete class using a static method within an abstract class

Dealing with side effects in react/redux: Best practices and tips

How can I create an endless animation using Angular6?

Perfecting compound types

Avoiding the pitfalls of hierarchical dependency injection in Angular 6

Create a Bar Graph Using a List

Unable to load custom package in Angular 2 testing environment

Ways to confirm the visibility of a web element on the screen with serenity-js

Establishing the initial state within the constructor of a React Component utilizing a generic state

What is the reason for the regeneration of the 2D array?

Is it possible to use null and Infinity interchangeably in JavaScript?

Using the hook to implement the useContext function in React

Store the HttpRequest value within the component

Tips for sorting data based on duplicate dates within a single array element

An issue arises following an upgrade in Angular from version 9 to version 10, where the property 'propertyName' is being utilized before it has been initialized

Ways to properly assign a key in a Generic Interface as the interface key

In TypeScript, create an object with a set number of key-value pairs, denoted

I seem to be invisible to the toggle switch

Step-by-step guide on adding a command to a submenu through the vscode extension api