{

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


Learn Typescript String tutorials This post talks about how do you add property or function in window global name scope in javascript or typescript

Window is an inbuilt JavaScript global object. It provides properties like location and history and also methods like open.

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

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

Yes, We can add properties,methods in 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 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 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 into you want to use

CustomWindowExample.ts:

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

Third, is to declare a class of type Window object

declare let window: EmloyeeWindow;

Finally, You can test the same by adding properties into 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 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.