Proyecto final: un API client tipado end-to-end

El proyecto que cierra el supercurso: un cliente de API genérico y tipado de punta a punta. Recibe datos del "servidor" como unknown, los VALIDA en la frontera, y devuelve Resultado<T> tipado —el patrón exacto de la capa de red de una app profesional—. Reúne genéricos, discriminated unions, validación en runtime y clases. Tu pieza de portafolio en TypeScript.

Reto

El API client genérico y tipado

Difícil150 min150 XP(×2 sin mirar la solución)

Qué debes construir

Un ApiClient reutilizable que carga y valida cualquier recurso. Al ejecutarse debe imprimir EXACTAMENTE:

GET /gastos -> 2 gastos

· Café: 4000

· Bus: 2800

GET /gastos/1 -> Café

GET /roto -> Error: datos inválidos

Requisitos (todo el curso, junto):

1. Resultado<T>: la discriminated union genérica de siempre.
2. type Validador<T> = (x: unknown) => x is T: un type guard tipado (módulo 4).
3. class ApiClient con un método genérico:
   • get<T>(url: string, validar: Validador<T>): Promise<Resultado<T>> — hace la "petición" (simulada), recibe unknown, lo valida con el validar INYECTADO, y devuelve Resultado<T> (ok: true con los datos tipados, o ok: false si no valida).
4. Validadores concretos: esGasto y esArrayDeGastos (type guards).
5. El guion: carga una lista de gastos, un gasto individual, y una ruta que devuelve basura —manejando cada Resultado con narrowing.

Reglas

• Los datos del "servidor" entran como unknown; el ApiClient no asume su forma.
• El validador se INYECTA en get (módulo 4 y 13 de JS): el cliente no sabe qué valida, lo recibe.
• Todo tipado, nada de any fuera del interior de los guards. Salida exacta.

150:00

Cuando estés listo, arranca el reloj.

Iniciar

Pista 1

Pista 2(revela primero la pista 1)

Pista 3(revela primero la pista 2)

Este cierre reúne el supercurso entero en su patrón más profesional:

1. El genérico get<T> + Validador<T> inyectado hace el cliente UNIVERSAL: sirve para gastos, usuarios, cualquier recurso —le pasas el validador de ese tipo y devuelve Resultado<T> perfectamente tipado. Inyección de dependencias (módulo 4/13) + genéricos (módulo 5).
2. unknown en la frontera + type guard cierra la brecha runtime/tipos (módulo 8): el cliente nunca confía en el servidor; valida y recién entonces tipa. En producción, ese Validador<T> sería un Schema.safeParse de Zod —misma forma, menos código.
3. Resultado<T> hace que el llamador DEBA manejar el fallo con narrowing (módulos 4 y 5): imposible olvidar el caso de error.

Autoevaluación final: ¿el mismo get<T> sirve para un array de gastos Y para un gasto individual, solo cambiando el validador? ¿los datos del servidor entran como unknown y salen tipados SOLO tras validar? ¿cada Resultado te obligó a manejar el error? Prueba a crear un type Usuario con su esUsuario y cargar /usuarios —el MISMO cliente, sin tocar una línea, ahora tipa usuarios. Ese cliente genérico, tipado y con validación en la frontera es, literalmente, la capa de red de una aplicación de producción. Acabas de escribir el TypeScript por el que te contratan.

Revelar solución

Fin del supercurso de TypeScript

Lo lograste. Diez módulos: del "¿para qué TS si ya sé JS?" a construir un API client genérico y tipado, pasando por la maquinaria más profunda del sistema de tipos. Repasa lo que ahora SABES HACER:

• Los fundamentos: tipos, uniones, literales, any/unknown/never, inferencia.
• Las funciones y contratos: tipar firmas, interface vs type, sobrecargas.
• El narrowing: type guards, discriminated unions, exhaustividad con never.
• Los genéricos: de identity<T> a estructuras genéricas con constraints.
• Los utility types y su maquinaria: Partial/Pick/Record y cómo se construyen con mapped, conditional y template literal types.
• El mundo real: tipar el DOM, fetch con Zod, declaration files, clases y decoradores.
• El oficio: strict a fondo, paths, ESLint type-aware, migrar JS a TS, y los type-challenges.

Ya no eres alguien que "escribe JavaScript con algunos tipos". Piensas en tipos: modelas tus datos para hacer los errores imposibles, no solo detectables. Lo que sigue en tu camino son los frameworks —React, Next.js, Angular, NestJS—, y todos hablan TypeScript de forma nativa: cada useState<T>, cada @Component, cada endpoint tipado que escribas se apoyará en lo que dominas ahora. La red de seguridad está tejida. Ahora se construye alto, y sin miedo a caer.