Cliente HTTP en TypeScript: haciendo solicitudes correctamente: de la A a la Z

Cliente HTTP en TypeScript: haciendo solicitudes correctamente

TypeScript es una extensión fuertemente tipada de JavaScript que añade confiabilidad y legibilidad al código en el desarrollo web. Al trabajar con APIs externas o un backend, la habilidad clave es saber cómo realizar solicitudes HTTP correctamente. En este artículo, analizaremos cómo crear un cliente HTTP completo en TypeScript, desde los principios básicos hasta patrones avanzados de manejo de errores y tipificación.

¿Por qué TypeScript es ideal para clientes HTTP?

JavaScript ofrece varias formas de realizar solicitudes HTTP: el fetch incorporado, las bibliotecas axios y node-fetch. Sin embargo, TypeScript permite llevar el trabajo con ellas a un nuevo nivel gracias a la tipificación estática. Puede describir de antemano la estructura de la solicitud y la respuesta, lo que elimina muchos errores en la etapa de compilación. Imagine que trabaja con una API que devuelve una lista de usuarios. Sin tipos, corre el riesgo de acceder a un campo inexistente, y el error solo se manifestará en tiempo de ejecución. TypeScript resuelve este problema.

Parte principal: creando un cliente HTTP desde cero

1. Solicitud GET básica con fetch y tipificación

Empecemos con lo más simple: una solicitud GET. En TypeScript, podemos definir una interfaz para la respuesta y pasarla a la función genérica fetch. Aquí hay un ejemplo:

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);    if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }    const data: User = await response.json();  return data;}

// UsogetUser(1)  .then(user => console.log(user.name))  .catch(error => console.error('Error:', error.message));

Aquí indicamos explícitamente que la función devuelve Promise<User>. Si la API cambia, el compilador de TypeScript le advertirá sobre la falta de coincidencia de tipos. Observe la verificación de response.ok — este es un paso obligatorio para manejar errores HTTP (404, 500, etc.).

2. Solicitud POST con cuerpo y encabezados

El envío de datos al servidor requiere configurar encabezados y serializar el cuerpo de la solicitud. Creemos una función para crear un nuevo usuario:

interface CreateUserRequest {  name: string;  email: string;}

interface CreateUserResponse {  id: number;  name: string;  email: string;}

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {  const response = await fetch('https://jsonplaceholder.typicode.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(userData),  });

  if (!response.ok) {    const errorBody = await response.text();    throw new Error(`Error de creación: ${response.status} - ${errorBody}`);  }

  return await response.json();}

// Ejemplo de llamadaconst newUser: CreateUserRequest = { name: 'Iván', email: 'ivan@example.com' };createUser(newUser).then(result => console.log('ID creado:', result.id));

La tipificación de CreateUserRequest y CreateUserResponse hace que el código sea autodocumentado. Otros desarrolladores ven de inmediato qué campos son obligatorios para enviar y qué esperar en la respuesta.

3. Cliente HTTP universal con manejo de errores

En proyectos reales, rara vez se usa una sola función. Es mejor crear una clase universal o un conjunto de funciones que centralice la lógica de las solicitudes. Aquí hay un ejemplo de un cliente avanzado:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface RequestConfig {  method: HttpMethod;  endpoint: string;  body?: unknown;  params?: Record<string, string>;}

class HttpClient {  private baseUrl: string;\