Maquetación Web Dinámica / TypeScript en la maquetación

Reto: migra tu página viva a TypeScript estricto

Reto65 min60 XP

Tu graduación como maquetador con red de seguridad: tomar la página viva del módulo 14 —scroll reveals, navbar inteligente y modal accesible— y migrarla a TypeScript estricto, sin un solo error del compilador. El resultado se ve y se comporta IGUAL; la diferencia es que ahora es imposible que un null o un typo la rompan sin que tú lo sepas antes.

Reto

La página viva, ahora tipada

Media60 min60 XP(×2 sin mirar la solución)

Qué debes construir

Migra tu proyecto del módulo 14 (o el de referencia de su reto) a un Vite vanilla-ts, con "strict": true, hasta que tsc no reporte NINGÚN error.

Requisitos:

Todos los elementos tipados: querySelector<...> con el tipo correcto, querySelectorAll<HTMLElement> para las colecciones.
Todos los null manejados: sin ! gratuitos; usa null-guards (if) u optional chaining donde corresponda.
Eventos tipados: aprovecha la inferencia (KeyboardEvent en keydown) y castea event.target cuando haga falta.
Cero errores en modo estricto: npx tsc --noEmit limpio.
Mismo comportamiento y misma accesibilidad que el original (reveals con reduced-motion, navbar, modal con foco/Escape).

Reglas

Vite vanilla-ts, tsconfig estricto.
Nada de any (romperías el propósito) ni // @ts-ignore para tapar errores: resuélvelos de verdad.
El ! (non-null assertion) solo si de verdad no hay forma de que sea null y lo justificas; preferir el if.

60:00

Cuando estés listo, arranca el reloj.

El razonamiento — migrar bien es un proceso mecánico y agradable:

Tipa primero, deja que aparezcan los errores. Al poner los tipos en la selección, TypeScript ilumina cada null sin manejar. No los buscas: te los muestra. Vas apagando cada rojo con un guard o un ?..
Un null-guard por bloque, no aserciones sueltas. Envolver el modal en if (abrir && modal && cerrar) limpia de golpe los tres, sin ! por todos lados. El código queda idéntico al del módulo 14 pero seguro.
Confía en la inferencia. No tipas los eventos a mano: addEventListener ya sabe que keydown da KeyboardEvent. Solo casteas event.target cuando lo necesites. TypeScript trabaja PARA ti, no te estorba.

La lógica tipada (lo que escribes en tu editor):

main.ts

const quieto: boolean = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// 1. SCROLL REVEALS
const items = document.querySelectorAll<HTMLElement>(".revelar");
if (quieto) {
items.forEach((el) => el.classList.add("visible"));
} else {
const obs = new IntersectionObserver((entries) => {   // entries: IntersectionObserverEntry[]
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.25 });
items.forEach((el) => obs.observe(el));
}

// 2. NAVBAR INTELIGENTE
const navbar = document.querySelector<HTMLElement>("#navbar");
const hero = document.querySelector<HTMLElement>("#hero");
if (navbar && hero) {
new IntersectionObserver((entries) => {
  entries.forEach((e) => navbar.classList.toggle("compacta", !e.isIntersecting));
}, { threshold: 0.1 }).observe(hero);
}

// 3. MODAL ACCESIBLE
const abrir = document.querySelector<HTMLButtonElement>("#abrir");
const modal = document.querySelector<HTMLElement>("#modal");
const cerrar = document.querySelector<HTMLButtonElement>("#cerrar");
let previo: HTMLElement | null = null;

if (abrir && modal && cerrar) {
abrir.addEventListener("click", () => {
  previo = document.activeElement as HTMLElement;
  modal.classList.add("abierto");
  cerrar.focus();
});
const cerrarModal = () => {
  modal.classList.remove("abierto");
  previo?.focus();
};
cerrar.addEventListener("click", cerrarModal);
document.addEventListener("keydown", (event) => {   // event: KeyboardEvent
  if (event.key === "Escape" && modal.classList.contains("abierto")) cerrarModal();
});
}

Y corriendo (el JavaScript compilado — mismo comportamiento):

<header class="navbar" id="navbar"><span class="logo">Forge</span><button class="btn" id="abrir">Suscríbete</button></header>
<section class="hero" id="hero"><h1>Página viva, tipada</h1><p>Baja para los reveals. "Suscríbete" abre el modal.</p></section>
<section class="bloque revelar"><h2>Reveal 1</h2><p>Aparezco al entrar en pantalla.</p></section>
<section class="bloque revelar"><h2>Reveal 2</h2><p>El navbar de arriba ya se compactó.</p></section>
<section class="bloque revelar"><h2>Reveal 3</h2><p>Mismo JS del módulo 14, escrito con red de seguridad.</p></section>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="mt" aria-hidden="true"><div class="dialogo"><h2 id="mt">Suscríbete</h2><p>Cierra con el botón, Escape o el fondo.</p><button class="btn" id="cerrar">Listo</button></div></div>

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; background: #f8fafc; }
.navbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: rgba(255,255,255,0.92); transition: padding 200ms ease, box-shadow 200ms ease; }
.navbar.compacta { padding: 9px 20px; box-shadow: 0 2px 14px rgba(15,23,42,0.12); }
.logo { font-weight: 800; color: #6d28d9; }
.btn { padding: 9px 16px; border: 0; border-radius: 8px; background: #6d28d9; color: white; font-weight: 600; cursor: pointer; }
.btn:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.hero { padding: 50px 20px 80px; text-align: center; }
.hero h1 { margin: 0 0 8px; font-size: 24px; color: #1e293b; }
.hero p { margin: 0; color: #64748b; }
.bloque { max-width: 440px; margin: 0 auto 60px; padding: 22px; background: white; border: 1px solid #e2e8f0; border-radius: 14px; }
.bloque h2 { margin: 0 0 6px; color: #6d28d9; }
.bloque p { margin: 0; color: #475569; font-size: 14px; }
.revelar { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.revelar.visible { opacity: 1; transform: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,0.6); opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.modal.abierto { opacity: 1; visibility: visible; }
.dialogo { background: white; border-radius: 14px; padding: 22px; max-width: 300px; display: grid; gap: 10px; }
.dialogo h2 { margin: 0; font-size: 18px; color: #1e293b; }
.dialogo p { margin: 0; font-size: 14px; color: #475569; }
@media (prefers-reduced-motion: reduce) { .revelar, .navbar, .modal { transition: none; } }

const quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const items = document.querySelectorAll(".revelar");
if (quieto) { items.forEach((el) => el.classList.add("visible")); }
else {
const obs = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) { entry.target.classList.add("visible"); obs.unobserve(entry.target); }
  });
}, { threshold: 0.25 });
items.forEach((el) => obs.observe(el));
}
const navbar = document.querySelector("#navbar");
const hero = document.querySelector("#hero");
if (navbar && hero) {
new IntersectionObserver((entries) => {
  entries.forEach((e) => navbar.classList.toggle("compacta", !e.isIntersecting));
}, { threshold: 0.1 }).observe(hero);
}
const abrir = document.querySelector("#abrir");
const modal = document.querySelector("#modal");
const cerrar = document.querySelector("#cerrar");
let previo = null;
if (abrir && modal && cerrar) {
abrir.addEventListener("click", () => { previo = document.activeElement; modal.classList.add("abierto"); modal.setAttribute("aria-hidden", "false"); cerrar.focus(); });
const cerrarModal = () => { modal.classList.remove("abierto"); modal.setAttribute("aria-hidden", "true"); if (previo) previo.focus(); };
cerrar.addEventListener("click", cerrarModal);
modal.addEventListener("click", (e) => { if (e.target === modal) cerrarModal(); });
document.addEventListener("keydown", (e) => { if (e.key === "Escape" && modal.classList.contains("abierto")) cerrarModal(); });
}

Autoevaluación: ¿npx tsc --noEmit sale limpio? ¿Cada elemento tiene su tipo y cada null su guard (sin ! gratuitos ni any)? ¿La página se comporta idéntica a la del módulo 14? Tres síes: migraste a TypeScript estricto, la habilidad que el brief marca como imprescindible.

Qué sigue

Módulo 15 cerrado: escribes interfaces con red de seguridad, del DOM a los datos. El módulo 16 cambia de disciplina y sube el techo creativo al máximo: GSAP, la librería de animación con la que se hacen los sitios premiados en Awwwards. Timelines, ScrollTrigger y scrollytelling — cuando el CSS del módulo 11 ya no alcanza, empieza GSAP.