0Pricing
TypeScript Academy · Lección

Tipado de respuestas de fetch con wrappers genéricos

Escriba un helper de fetch tipado que devuelva tipos seguros.

Tipado de respuestas de fetch con wrappers genéricos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Bienvenida

Escriba funciones auxiliares de fetch tipadas para consumir API HTTP de forma segura.

El problema de fetch

La API fetch devuelve Promise y .json() devuelve Promise. Sin tipos, pierde toda la seguridad.
const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

Wrapper genérico de fetch

Cree una función auxiliar de fetch tipada que suponga la estructura de la respuesta.
async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

Usar el wrapper

Llame al wrapper con un argumento de tipo explícito.
interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

Añadir gestión de errores

Amplíe el wrapper para que devuelva un tipo Result.
async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

Tipado de las opciones de la solicitud

Tipifique las opciones de fetch para solicitudes POST/PUT.
async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

Validación de la respuesta

Valide la estructura de la respuesta antes de devolverla como valor tipado.

Tipado de AbortController

Tipifique AbortController y AbortSignal para solicitudes cancelables.
const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

Interceptor de URL base

Cree una clase de cliente HTTP con una URL base.
class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

Headers tipados

Tipifique los headers de la solicitud y de la respuesta.
const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

Tipos de paginación

Tipifique las respuestas paginadas de la API.
interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

Comprobación rápida

¿Qué hace `res.json() as Promise` en un wrapper de fetch tipado?

Recapitulación

Tipado de respuestas de fetch con wrappers genéricos: ha dominado los conceptos y patrones clave.

Preguntas frecuentes

¿La lección «Tipado de respuestas de fetch con wrappers genéricos» es gratis?

Sí — el texto completo de «Tipado de respuestas de fetch con wrappers genéricos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Tipado de respuestas de fetch con wrappers genéricos»?

Escriba un helper de fetch tipado que devuelva tipos seguros. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Tipado de respuestas de fetch con wrappers genéricos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipado de respuestas de fetch con wrappers genéricos
  2. Validación en tiempo de ejecución con Zod
  3. Generación de código OpenAPI: tipos autogenerados
  4. Introducción al cliente tRPC seguro respecto a los tipos
← Volver a TypeScript Academy