Asincronía tipada con Promise y async/await

Gestiona datos remotos con tipos consistentes y flujos de error previsibles.

En asincronía, los errores de tipos suelen venir de respuestas mal modeladas y cadenas de promesas sin contrato claro.

Tipar Promise correctamente te obliga a decidir qué devuelve cada paso y cómo se propagan fallos.

Con async/await, la legibilidad mejora, pero solo si los tipos de retorno y error están diseñados explícitamente.

El objetivo es construir flujos asíncronos predecibles para UI, servicios y sincronización de datos.

  • Una Promise sin tipo claro acaba contaminando el flujo con any o unknown mal tratados.
  • Define tipos de respuesta desde la capa de fetch/cliente HTTP, no en cada consumidor.
  • Evita funciones async que devuelven estructuras distintas según rama sin discriminar explícitamente.
  • Cuando encadenas transformaciones, tipa cada etapa para detectar incompatibilidades antes de runtime.
  • throw sin criterio dificulta a consumidores saber qué deben manejar.

Promesas con contrato explícito

Una Promise sin tipo claro acaba contaminando el flujo con any o unknown mal tratados.

Define tipos de respuesta desde la capa de fetch/cliente HTTP, no en cada consumidor.

Evita funciones async que devuelven estructuras distintas según rama sin discriminar explícitamente.

Cuando encadenas transformaciones, tipa cada etapa para detectar incompatibilidades antes de runtime.

Errores asíncronos modelados

throw sin criterio dificulta a consumidores saber qué deben manejar.

Modela errores esperables (timeout, 401, validación) con tipos discriminados en vez de mensajes string sueltos.

En UI, ese modelado permite mapear estado de error a mensajes y acciones concretas sin condicionales caóticas.

Centraliza normalización de error en una capa para evitar duplicación de try/catch inconsistentes.

Concurrencia y cancelación en flujos reales

No toda operación asíncrona debe completarse: en UI, cancelar a tiempo evita estados corruptos.

Modela peticiones en curso y canceladas para no sobrescribir estado con respuestas obsoletas.

En operaciones paralelas, tipa resultados agregados (all/allSettled) para tratar fallos parciales con intención.

Un manejo explícito de concurrencia mejora experiencia de usuario y reduce race conditions difíciles de depurar.

TypeScript
11

Asincronía tipada con Promise y async/await

Gestiona datos remotos con tipos consistentes y flujos de error previsibles.

Código del tema: flujo async seguro

📘 Teoría

Promesas con contrato explícito

Una Promise sin tipo claro acaba contaminando el flujo con any o unknown mal tratados.

1

Define tipos de respuesta desde la capa de fetch/cliente HTTP, no en cada consumidor.

2

Evita funciones async que devuelven estructuras distintas según rama sin discriminar explícitamente.

3

Cuando encadenas transformaciones, tipa cada etapa para detectar incompatibilidades antes de runtime.

Errores asíncronos modelados

throw sin criterio dificulta a consumidores saber qué deben manejar.

1

Modela errores esperables (timeout, 401, validación) con tipos discriminados en vez de mensajes string sueltos.

2

En UI, ese modelado permite mapear estado de error a mensajes y acciones concretas sin condicionales caóticas.

3

Centraliza normalización de error en una capa para evitar duplicación de try/catch inconsistentes.

Fetch tipado con resultado de error
Revisar
type ContextoTypescriptasincroniatipadapro = {
  foco: string;
  objetivo: string;
  riesgo: string;
};

const contexto: ContextoTypescriptasincroniatipadapro = {
  foco: "flujo async seguro",
  objetivo: "escribir código predecible",
  riesgo: "abstraer sin criterio",
};

console.log("Checklist técnico:", contexto);

export {};

Concurrencia y cancelación en flujos reales

No toda operación asíncrona debe completarse: en UI, cancelar a tiempo evita estados corruptos.

1

Modela peticiones en curso y canceladas para no sobrescribir estado con respuestas obsoletas.

2

En operaciones paralelas, tipa resultados agregados (all/allSettled) para tratar fallos parciales con intención.

3

Un manejo explícito de concurrencia mejora experiencia de usuario y reduce race conditions difíciles de depurar.

🧪 Aprende probando

Ejemplo Ejemplo guiado Lee, ejecuta y modifica para ver cómo cambia el comportamiento al ajustar tipos.
Ejemplo Demo interactiva Prueba una mini interfaz para visualizar decisiones de tipado.

🏁 Retos

Reto Reto práctico Completa el ejercicio aplicando lo visto en esta sesión.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre TypeScript.

Test de TypeScript

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .