How to add a new property to a window object in typescript?

This post talks about how you add a property or function in the window global name scope in javascript or typescript

How to add an object to the window in Typescript?

Window is an inbuilt JavaScript global object. It provides properties like location and history and also methods like open. The same can be used in Typescript.

It is a tricky one to add a property in a window object in javascript and typescript

How do you set the new property to a window object in javascript?

Yes, We can add properties, and methods in the window global object as seen below

window.employee = {}; // global Object container; don't use var
employee.name = 1;
employee.salary = 1;
employee.totalSalary = function() {
    12 * employee.salary
}
employee.display = function() {
    console.log(employee.name);
}

As javascript, there is no type checking, This will work, However, This will not work in typescript and gives the following error.

The property ’employee’ does not exist on the value of type ‘window’ any:

So adding property in typescript is tricky and can be done with multiple approaches

Custom Interface Extends window object in typescript

Create an interface by extending the Window object. And, Add the properties to this.

First, Let’s Create an interface:EmployeeWindow.ts.

export interface EmloyeeWindow extends Window {
    name: string;
    salary: Integer;
    totalSalary: Function;
    display: Function;

}

Next, Window is a global object namespace, which is not required to import, But a custom interface needs to import in a class you want to use

CustomWindowExample.ts:

import {EmloyeeWindow} from './EmployeeWindow.ts';

The third is to declare a class of type Window object.

declare let window: EmloyeeWindow;

Finally, You can test the same by adding properties to the window object.

window.name = 'Franc';
window.salary = 5000;
window.totalSalary = () => {
    return window.salary * 12;
};
window.display = {
    console.log(window.name + ' salary is ' + window.totalSalary)
};

Any type in typescript

Please create a variable with the type assertion keyword as, which means the compiler understood and consider this as a window type.

as is a keyword used to infer the type as a new type

let EmployeeWindow = window as any;
EmployeeWindow.name = 'Franc';
EmployeeWindow.salary = 5000;
EmployeeWindow.totalSalary = () => {
    return window.salary * 12;
};
EmployeeWindow.display = {
    console.log(window.name + ' salary is ' + window.totalSalary)
};

Wrap up

Adding a property to a window object in javascript is indeed simple and easy, However, Typescript needs little extra coding and steps required to set the property in the window object.