El objeto window en TypeScript

Este artículo explica el objeto window en TypeScript.

Puedes aprender sobre las propiedades y métodos del objeto window a través del código.

YouTube Video

El objeto window en TypeScript

window es un objeto global en TypeScript y JavaScript que representa toda la ventana del navegador. Incluye muchas propiedades y métodos para acceder a las APIs del navegador, manipular el DOM (Modelo de Objeto de Documento), usar temporizadores, almacenamiento y otras características.

tsconfig.json y el objeto window

En TypeScript, al acceder al objeto window, las características globales específicas del navegador tienen definiciones de tipo, lo que permite la autocompletación del editor y la verificación de tipos. Gracias al archivo de definiciones de tipo estándar de TypeScript (lib.dom.d.ts), TypeScript reconoce varias propiedades y métodos del objeto window.

Cuando se utiliza TypeScript, es común colocar un archivo tsconfig.json en la raíz del proyecto. Este archivo se utiliza para especificar las opciones del compilador y el alcance de los archivos de definición de tipos.

Al trabajar con window, es especialmente importante habilitar las definiciones de tipos del navegador (definiciones de tipo DOM). Sin esto, window y document generarán errores de tipo.

 1{
 2  "compilerOptions": {
 3    "target": "es6",
 4    "module": "esnext",
 5    "strict": true,
 6    "lib": ["es6", "dom"],   // Enable DOM type definitions
 7    "outDir": "./dist"
 8  },
 9  "include": ["src"]
10}

• Al especificar "lib": ["es6", "dom"], los tipos de window y document serán correctamente reconocidos y autocompletados.

Principales propiedades y métodos de window

1. window.document window.document es una propiedad utilizada para acceder al DOM de la página. Puedes recuperar elementos y hacer cambios en el DOM.

1console.log(window.document.title);  // Display the title of the current document

• En este ejemplo, se muestra el título del documento actual.

2. window.localStorage / window.sessionStorage window.localStorage y window.sessionStorage son propiedades utilizadas para acceder a funciones de almacenamiento que permiten guardar datos del usuario en el navegador.

1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'

• En este ejemplo, los datos se guardan en localStorage, luego se recuperan y se muestran.

3. window.location window.location es un objeto utilizado para obtener y manipular información sobre la URL actual. Puedes realizar redirecciones y cambiar URLs.

1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page

• En este ejemplo, se muestra la URL y el usuario es redirigido a otra página.

4. window.setTimeout / window.setInterval window.setTimeout y window.setInterval son métodos utilizados para ejecutar funciones después de una demora o a intervalos regulares.

1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);

• Este código ejecuta un proceso que muestra un mensaje en la consola después de dos segundos.

5. window.alert / window.confirm / window.prompt alert, confirm y prompt muestran cuadros de diálogo para mostrar alertas o solicitar información al usuario.

1window.alert('Alert message');

• Este código muestra un cuadro de alerta para notificar un mensaje.

Eventos del objeto window

Como window es parte del DOM, también puedes escuchar eventos directamente. En TypeScript, los tipos se autocompletan, por lo que usar nombres de eventos o propiedades incorrectos causará errores.

Evento de cambio de tamaño de la ventana

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});

• Este código muestra el nuevo ancho y alto en la consola cuando el tamaño de la ventana cambia.

Evento de teclado

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});

• Este código muestra en la consola la tecla presionada cuando el usuario pulsa una tecla.

Evento de carga de la página

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});

• Este código muestra un mensaje en la consola cuando la página ha terminado de cargar.

Notas

• En TypeScript, los tipos de objetos de evento se infieren, así que tener en cuenta tipos como KeyboardEvent o MouseEvent hace tu código más seguro.

• Se recomienda eliminar los listeners de eventos cuando ya no son necesarios. Puedes eliminar los listeners usando el método window.removeEventListener.

1function handleClick() {
2  console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);

• Este código muestra un ejemplo de cómo agregar y luego eliminar un listener para un evento de clic.

Al añadir propiedades personalizadas

Al añadir propiedades personalizadas al objeto window, es necesario extender el tipo en TypeScript para evitar errores de tipo.

1// Add a custom property to the window
2interface Window {
3    myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty);  // "Hello, World!"

• Este código es un ejemplo de cómo agregar una propiedad personalizada al objeto window en TypeScript, asignarle un valor y mostrarlo.

Precauciones al usar el objeto global window

Debido a la estricta verificación de tipos de TypeScript, intentar usar propiedades o métodos inexistentes resultará en errores. Por ejemplo, intentar acceder a una propiedad inexistente en el objeto window tal cual causará un error, por lo que necesitas extender el tipo correctamente.

Como tal, el objeto window juega un papel central en el acceso a varias características de las aplicaciones del navegador, y en TypeScript, puedes usarlo de manera segura aprovechando la verificación de tipos.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video