A menudo, las llamadas API en TypeScript se convierten en un infierno desordenado cuando no organizamos nuestro código de manera adecuada.

El truco

Antes (mal):

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

Después (bien):

interface ApiResponse {
  id: number;
  name: string;
  // Otros campos...
}

async function fetchData(): Promise<ApiResponse> {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Error en la respuesta');
    const data: ApiResponse = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

fetchData().then(data => {
  console.log(data);
  // Operaciones limpias con datos tipados
});

Al tipar la respuesta de la API con una interfaz ApiResponse, mejoramos la legibilidad y robustez del código. La función fetchData es asíncrona, lo que hace el flujo más claro con async/await, manejando errores de manera centralizada. Al usar TypeScript, nos aseguramos de que los datos sean del tipo esperado, evitando bugs antes de que ocurran.

Opta por manejar llamadas API con tipos y promesas asíncronas para mantener tu código limpio y fácil de mantener.