Desbloquea el poder de TypeScript: API Calls sin dolor

Lidiar con llamadas API sin un sistema de tipos puede convertirse en un caos mantenible y propenso a errores.

El truco

Código ANTES (mal):

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data.name, data.age);
  })
  .catch(error => console.error('Error:', error));

Código DESPUÉS (bien):

interface UserData {
  name: string;
  age: number;
}

async function fetchUserData(url: string): Promise<UserData> {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
}

fetchUserData('https://api.example.com/data')
  .then(data => {
    console.log(data.name, data.age);
  })
  .catch(error => console.error('Error:', error));

Al definir la interfaz UserData, proporcionamos un contrato claro sobre qué esperar de los datos. Esto permite a TypeScript advertirnos si intentamos acceder a propiedades que no existen. El uso de async/await hace que el código sea más limpio y fácil de entender, eliminando la necesidad de múltiples then. Además, verificamos la respuesta antes de tratar de convertirla en JSON, mejorando el manejo de errores.

TypeScript transforma tus llamadas API en código robusto y mantenible al hacer visible lo que el código espera recibir.