Cómo declarar una nueva propiedad en el objeto Window del explorador con Typescript

En JavaScript, la declaración de una nueva propiedad dentro de cualqueir objeto es realmente simple e incluso hay 2 maneras de hacerlo:

// Declarar programaticamente
window.MiPropiedad = function(){
    alert("Hola Mundo");
};

// Declarar con corchetes
window["MiPropiedad"] = function(){
    alert("Hola Mundo");
};

La variable Window es un objeto, por lo tanto para declarar una nueva propiedad en el con Javascript simplemente usariamos el código anterior y todo debería funcionar perfectamente. Sin embargo, en TypeScript la cosa no funciona de la misma manera, al menos durante la compilación y el verificador de sintaxis de tu IDE deberías recibir una excepción como la siguiente:

[TS] Propiedad 'MiPropiedad' no existe en tipo 'Window'

El error de hecho, es bastante sencillo, para entenderlo mejor vamos a usar la siguiente clase de TypeScript, la clase DeviceInfo:

class DeviceInfo {
    setInfo(){
        console.log("Solo un ejemplo ...");
    }
}

let info = new DeviceInfo();

// La siguiente linea debería generar una excepcion
// Property 'nombre' does not exist on type 'DeviceInfo'
info.nombre = "BatiTeléfono";

Para resolver el error, solo necesitamos agregar el nombre de la propiedad a la clase:

class DeviceInfo {
    nombre: string;
    setInfo(){
        console.log("Solo un ejemplo ...");
    }
}

let info = new DeviceInfo();
// No más error
info.nombre = "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?

Declarando una nueva propiedad en el objeto Window

Dependiendo de la manera en la que trabajes y de la versión de TypeScript que uses, hay 2 maneras de agregar una nueva propiedad al objeto Window:

1. Con una interfaz

Para agregar una nueva propiedad y prevenir la generación de errores durante la compilación, puedes usar una interfaz para describir el objeto Window con una nueva propiedad. En TypeScript, las interfaces cumplen con la tarea de definir y nombrar tipos.

Como el proposito de una interfaz es solamente de describir un tipo o un objeto (no será convertido a JavaScript), puedes crear una interfaz para describir el objeto window y agregar una nueva propiedad, el nombre de la propiedad y el error no debería aparecer más:

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 :)

El siguiente ejemplo muestra como declarar propiedades diferentes en el objeto Window usando una interface con diferentes tipos:

interface Window {
    NumeroPersonalizado: number;
    FuncionPersonalizada: Function;
    TextoPersonalizado: string;
    AlgoPersonalizado: any;
}

window.NumeroPersonalizado = 123;

window.FuncionPersonalizada = () => {
    console.log("Hola Mundo");
};

window.TextoPersonalizado = "TypeScript";

window.AlgoPersonalizado = {
    hola: 12,
    mundo: 21
};

2. Manten tu código dinámico

Si no quieres prestarle atención a la creación de tipos, puedes usar la siguiente sintaxis para declarar una nueva propiedad:

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

El siguiente ejemplo muestra como declarar diferentes tipos en el objeto Window:

(<any>window).FuncionPersonalizada = () => {
    alert("Hola mundo");
};

(<any>window).NumeroPersonalizado = 123;

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

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable