Ventana extendida de TypeScript

1. Objeto window de TypeScript
2. Declarar nueva propiedad en el objeto Ventana en TypeScript
3. Fusión de declaración de interfaz en TypeScript

Este artículo muestra cómo extender una window de TypeScript.

Objeto window de TypeScript

Una window es un objeto integrado definido en el navegador. Es el objeto window que contiene un documento DOM.

Es posible que necesite acceder a las propiedades y funciones asociadas con el objeto window del navegador. El objeto window incorporado lleva muchas propiedades y funciones útiles listas para usar.

A continuación se enumeran algunas de las propiedades y funciones del objeto window que se utilizan con frecuencia.

1. Propiedades: EventTarget, document, console, event, localStorage, onLoad, etc.
2. Métodos: addEventListener, fetch, alert, atob, btoa, open, prompt, print, etc.

Por lo general, TypeScript define sus tipos en diferentes módulos. Por lo tanto, el tipo window se define en el módulo lib.dom.

En algunos escenarios, los métodos y propiedades integrados no son suficientes. Siempre que su proyecto de TypeScript utilice las bibliotecas de Google Analytics o Tag Manager, es posible que su código no cargue estos scripts.

Por lo tanto, necesitamos una forma de comunicarnos con esas herramientas de terceros a través de las propiedades y métodos del objeto window.

Declarar nueva propiedad en el objeto Ventana en TypeScript

En JavaScript, es bastante sencillo declarar una nueva propiedad o método en el objeto window incorporado. Podemos utilizar las siguientes formas de definir una nueva propiedad en el objeto window con JavaScript.

window.myProp = 'newly declared property';
window['myProp'] = 'newly declared property';

Inspeccionemos el objeto window en la consola del navegador.

console.log(window);

Producción:

En TypeScript, los enfoques anteriores no funcionarían. Si intentamos declarar una nueva propiedad en el objeto window como en JavaScript, TypeScript arrojará un error, como se muestra a continuación.

window.anotherNewProp = 'this is a property on window object in typescript';

Producción:

Por lo general, un tipo de objeto de TypeScript se basa en una clase o una interfaz. Digamos que tenemos una clase llamada Animal, como se muestra a continuación.

class Animal {
    name: string;
    color: string;
}

Vamos a crear un objeto Animal y asignar algunos valores a las propiedades name y color.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';

El código anterior se compilará sin ningún problema.

A continuación, intentaremos declarar una nueva propiedad numberOfLegs en el mismo objeto Animal y asignarle un valor.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';
newAnimal.numberOfLegs = 4;

Me lanza un error. No podemos declarar nuevas propiedades de objeto como esa en TypeScript.

Para resolver eso, primero debemos agregar la propiedad numberOfLegs a la clase Animal.

Este es el mismo problema con el objeto window incorporado también. La principal preocupación es que el objeto window de TypeScript no es creado por nosotros mismos.

Viene con un navegador. Por lo tanto, necesitamos una forma adecuada de agregar una propiedad a este objeto integrado.

Fusión de declaración de interfaz en TypeScript

TypeScript es compatible con la técnica de fusión de declaraciones desde el primer momento. El tipo más simple de fusión de declaración es la fusión de interfaz.

Siempre que las múltiples interfaces se declaren con el mismo nombre, TypeScript fusionará todas las declaraciones de las interfaces en una sola.

El objeto window incorporado se basa en la interfaz window de TypeScript. Por lo tanto, podemos usar la técnica de fusión de la interfaz de TypeScript para agregar una nueva propiedad a la interfaz integrada.

Vamos a crear una nueva interfaz llamada window.

interface Window {
    myProp: string;
}

A continuación, intentaremos acceder a la propiedad myProp en el objeto window.

interface Window {
    myProp: string;
}

window.myProp = 'typescript window object property';

Producción:

No hay problemas planteados por el compilador de TypeScript esta vez. Se recomienda definir nuevas propiedades o métodos en el objeto window si considera los tipos.

Si no hay dudas sobre los tipos, se puede usar la siguiente sintaxis para declarar nuevas propiedades en el objeto window.

(<any>.window).myProp = 'typescript property on window object';

También puede declarar funciones.

(<any>.window).NewFunction = () => {
    console.log('new function on window object');
}

Ambas técnicas se pueden usar con TypeScript para agregar nuevas propiedades o métodos al objeto window. La elección es suya según el contexto.