Por qué TypeScript: errores antes de que ocurran

En el módulo 14 escribiste JavaScript "a secas", y funcionó — hasta que un typo en un nombre de propiedad o un elemento que no existe rompe la página en producción, sin aviso. TypeScript es JavaScript con una red de seguridad: tu editor te marca esos errores MIENTRAS escribes, no cuando ya es tarde. Hoy entiendes por qué el brief de este curso lo considera tan importante, y qué te da exactamente.

El corrector que trabaja mientras escribes

TypeScript es un "superset" de JavaScript: todo tu JS válido ya es TS válido. Le agregas TIPOS —anotaciones de qué clase de dato es cada cosa— y a cambio, un verificador revisa tu código antes de ejecutarlo.

Regalo 1: errores en tiempo de desarrollo

Mira bugs reales del módulo 14 que TypeScript habría cazado al instante:

// TYPO en una propiedad: en JS, undefined silencioso; en TS, error inmediato
const boton = document.querySelector("button");
boton.textContnet = "Enviar";
// ❌ Error TS: Property 'textContnet' does not exist. ¿Quisiste decir 'textContent'?

// NULL de querySelector: en JS revienta en runtime; TS te obliga a manejarlo
const input = document.querySelector(".campo");
input.value = "";
// ❌ Error TS: 'input' is possibly 'null'. (querySelector puede no encontrar nada)

// TIPO equivocado: pasar un número donde va un string
function saludar(nombre: string) { return "Hola " + nombre; }
saludar(42);
// ❌ Error TS: Argument of type 'number' is not assignable to parameter of type 'string'.

Cada uno de esos // ❌ aparece SUBRAYADO en rojo en tu editor mientras escribes — no en producción, no cuando un usuario reporta que "el botón no dice nada". El typo de textContnet, el null de querySelector que tanto cuidamos a mano en el módulo 14: TypeScript los convierte de bombas de tiempo en avisos instantáneos.

Regalo 2: autocompletado que de verdad sabe

Como TypeScript conoce el TIPO de cada cosa, tu editor te ofrece exactamente los métodos y propiedades válidos:

const input = document.querySelector("input");
// al escribir "input." el editor lista SOLO lo que un input tiene:
input.value        // ✓ existe
input.placeholder  // ✓ existe
input.checked      // ✓ existe
// ...y NO te ofrece cosas inventadas. Menos memorizar, menos abrir la documentación.

Este segundo regalo se siente incluso más que el primero en el día a día: programas más rápido porque el editor te va guiando, y descubres APIs que no sabías que existían. Es como escribir con alguien al lado que conoce de memoria toda la documentación del DOM.

La clave que no debes olvidar: el navegador no entiende TS

Mini-reto

Este es de reflexión, no de código: repasa el proyecto que hiciste en el módulo 14 (la página viva) y anota tres lugares donde un typo, un null de querySelector o pasar el dato equivocado PUDO haber roto algo sin que te dieras cuenta. Esos tres puntos son exactamente los que TypeScript habría subrayado en rojo. Verlos te da la motivación para lo que sigue.

Qué sigue

Convencido del por qué, vamos al cómo. La próxima lección monta un proyecto TypeScript mínimo con Vite y ataca el caso más común del maquetador: tipar los elementos del DOM —HTMLElement, HTMLInputElement— y manejar con honestidad el null que querySelector puede devolver.