Módulo 3 — Interacción con el DOM y el BOM en TypeScript

0. Ejecución de aplicaciones en .ts

Los proyectos con archivos .ts no se ejecutan directamente. Para usar TypeScript hay dos formas principales:

1. Compilar a JavaScript:

Lo primero es crear un archivo de configuración para convertir de .ts a .js en la raiz desde la que se ejecute el proyecto.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./**/*.ts"],
  "exclude": ["node_modules"]
}

npx tsc app.ts

Luego se incluye en HTML:

```html
<script src="app.js"></script>

1. Qué es el DOM

El DOM (Document Object Model) es la representación estructurada del documento HTML en forma de objetos tipados, accesibles y manipulables desde TypeScript.

En TypeScript, el DOM cobra especial importancia porque:

• Los elementos HTML están fuertemente tipados (HTMLElement, HTMLButtonElement, etc.)
• Se detectan errores comunes en tiempo de desarrollo
• Se fuerza a comprobar la existencia real de los nodos

Cada etiqueta HTML se convierte en un nodo dentro de un árbol jerárquico.

<!-- index.html -->
<h1 id="titulo">Gestión de Recursos Sanitarios</h1>
<button id="btnActualizar">Actualizar recursos</button>
<p id="mensaje"></p>

// app.ts
const titulo = document.getElementById('titulo') as HTMLHeadingElement;
const boton = document.getElementById('btnActualizar') as HTMLButtonElement;
const mensaje = document.getElementById('mensaje') as HTMLParagraphElement;

boton.addEventListener('click', (): void => {
  mensaje.textContent = 'Recursos actualizados correctamente';
  titulo.style.color = 'green';
});

En TypeScript, es habitual usar type assertions (as HTML...) o comprobaciones de null.

---

2. Qué es el BOM

El BOM (Browser Object Model) representa los objetos propios del navegador, accesibles mediante window.

TypeScript proporciona tipado completo para estos objetos.

console.log(window.innerWidth);
console.log(window.location.href);

setTimeout((): void => {
  alert('Datos cargados correctamente');
}, 2000);

---

3. Acceso a elementos del DOM

TypeScript mantiene los mismos métodos de acceso, pero con tipos concretos.

Método	Tipo devuelto	Observaciones
getElementById	`HTMLElement	null`	Debe comprobarse
querySelector	`Element	null`	Se puede tipar
querySelectorAll	NodeListOf<Element>	Iterable

<ul>
  <li class="recurso">Enfermeros</li>
  <li class="recurso">Ambulancias</li>
</ul>

const recursos = document.querySelectorAll<HTMLLIElement>('.recurso');
recursos.forEach((r: HTMLLIElement) => {
  console.log(r.textContent);
});

---

4. Manipulación del DOM

Crear elementos

const lista = document.getElementById('listaRecursos') as HTMLUListElement;
const nuevo = document.createElement('li');
nuevo.textContent = 'Médicos';
lista.appendChild(nuevo);

Modificar contenido

const titulo = document.querySelector('#titulo') as HTMLHeadingElement;
titulo.textContent = 'Recursos actualizados';

Cambiar estilos y atributos

const mensaje = document.getElementById('mensaje') as HTMLParagraphElement;
mensaje.style.color = 'blue';
mensaje.classList.add('alerta');

Eliminar elementos

if (lista.lastElementChild) {
  lista.removeChild(lista.lastElementChild);
}

---

5. Eventos en TypeScript

En TypeScript, los eventos están tipados, lo que evita errores comunes.

Usando addEventListener (forma recomendada)

const boton = document.getElementById('btnGuardar') as HTMLButtonElement;

boton.addEventListener('click', (event: MouseEvent): void => {
  console.log('Recurso guardado correctamente');
});

---

6. Tipos comunes de eventos

Evento	Tipo de evento
click	MouseEvent
input	InputEvent
change	Event
submit	SubmitEvent
load	Event

const input = document.getElementById('nuevoRecurso') as HTMLInputElement;

input.addEventListener('input', (e: Event): void => {
  const valor = (e.target as HTMLInputElement).value;
  console.log(valor);
});

---

7. Ejemplo práctico: actualización de recursos

<h2>Inventario</h2>
<ul id="listaRecursos">
  <li>Enfermeros</li>
  <li>Ambulancias</li>
</ul>
<input type="text" id="nuevoRecurso" placeholder="Nuevo recurso">
<button id="btnAgregar">Agregar</button>

const lista = document.getElementById('listaRecursos') as HTMLUListElement;
const input = document.getElementById('nuevoRecurso') as HTMLInputElement;
const boton = document.getElementById('btnAgregar') as HTMLButtonElement;

boton.addEventListener('click', (): void => {
  const valor = input.value.trim();

  if (valor !== '') {
    const li = document.createElement('li');
    li.textContent = valor;
    lista.appendChild(li);
    input.value = '';
  } else {
    alert('Por favor, ingresa un nombre de recurso');
  }
});

---

8. Interacción con el BOM: ventanas y temporizadores

if (confirm('¿Deseas guardar los cambios?')) {
  alert('Cambios guardados');
} else {
  alert('Acción cancelada');
}

setInterval((): void => {
  console.log('Sincronizando datos...');
}, 5000);

---

9. Buenas prácticas en TypeScript

• Comprobar siempre valores null al acceder al DOM.
• Evitar manipulaciones directas de estilo; preferir CSS.
• Usar tipos específicos (HTMLInputElement, HTMLButtonElement).
• Centralizar la lógica interactiva en funciones.