How to declare a new property on the Window object with Typescript

In Javascript, the declaration of a new property within any object, is very simple and there's even 2 ways to do it:

// Declare programatically
window.MyProperty = function(){
    alert("Hello World");
};

// Declare with Brackets
window["MyProperty"] = function(){
    alert("Hello World");
};

The Window variable, is an object, therefore to declare a new property in the Window object with Javascript we would just simply use the previous snippet and everything will work like a charm. However, in Typescript that wouldn't work ... at least during the compilation and in your IDE syntax checking (if it supports TypeScript), you should see the following warning:

The error indeed, is very simple. To understand it, we are going to use the following TypeScript class, the DeviceInfo class:

class DeviceInfo {
    setInfo(){
        console.log("This is just a demo ...");
    }
}

let info = new DeviceInfo();

// The following line should throw the error:
// Property 'name' does not exist on type 'DeviceInfo'
info.name = "BatPhone";

To solve the error, we just need to add the name property to the DeviceInfo class and that's it:

class DeviceInfo {
    name: string;
    setInfo(){
        console.log("This is just a demo ...");
    }
}

let info = new DeviceInfo();
// No more warning !
info.name = "BatPhone";

Very easy to solve in a custom object created by your own, but , the Window is not a class of yours ... that's an already built-in object in the browser! Then, how can you add a new property to the Window object in typescript properly?

Declaring a new property in the Window

Depending on the way you code and the TypeScript version that you use, there are 2 ways to add a new property to the window:

1. With an interface

To add a new property and prevent any compile error, you can use an interface to describe the Window with your new property. In TypeScript, interfaces fill the role of naming types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project. 

As the purpose of an interface is only to describe a type or an object (they won't be transpiled into Javascript), you can create an interface to describe window and add as a new property, the name of your property and the error shouldn't appear anymore:

interface Window {
    MyProperty: any;
}

window.MyProperty = 12345;

// as the type of MyProperty is any, you can change the value
// for the value you want, or specify a different type according
// to your needs :)

The following examples shows how to declare different properties in the Window object using an Interface with different types:

interface Window {
    CustomNumber: number;
    CustomFunction: Function;
    CustomString: string;
    CustomAnything: any;
}

window.CustomNumber = 123;

window.CustomFunction = () => {
    console.log("Hello World");
};

window.CustomString = "TypeScript";

window.CustomAnything = {
    hello: 12,
    world: 21
};

2. Keep your code dynamic

If you don't want to take care of the types, you can simply use the following syntax to create a new property:

(<any>window).MyPropertyName = "Something";

The following example shows how to declare different types in the window:

(<any>window).CustomFunction = () => {
    alert("Hello World");
};

(<any>window).CustomNumber = 123;

(<any>window).CustomString = "Code";

Happy coding !