El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Trabajando con APIs

Siguiente ►
►

En este tema, aprenderemos cómo trabajar con APIs en TypeScript. Las APIs (Interfaces de Programación de Aplicaciones) son esenciales para la comunicación entre diferentes sistemas y servicios. TypeScript, con su tipado estático, puede ayudarnos a manejar las respuestas de las APIs de manera más segura y eficiente.

Contenido

  1. Introducción a las APIs
  2. Realizando Peticiones HTTP
  3. Tipando Respuestas de APIs
  4. Ejemplo Práctico
  5. Ejercicios Prácticos
  6. Conclusión

Introducción a las APIs

Las APIs permiten que diferentes aplicaciones se comuniquen entre sí. En el contexto de aplicaciones web, las APIs RESTful son muy comunes. Estas APIs utilizan métodos HTTP (GET, POST, PUT, DELETE) para realizar operaciones sobre recursos.

Realizando Peticiones HTTP

Para realizar peticiones HTTP en TypeScript, podemos usar la API Fetch, que es nativa en los navegadores modernos. También podemos usar bibliotecas como Axios para simplificar el manejo de peticiones.

Usando Fetch

// Realizando una petición GET usando Fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Usando Axios

Primero, instala Axios:

npm install axios

Luego, puedes usar Axios de la siguiente manera:

import axios from 'axios';

// Realizando una petición GET usando Axios
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Tipando Respuestas de APIs

Una de las ventajas de TypeScript es que podemos definir tipos para las respuestas de las APIs, lo que nos ayuda a evitar errores y a tener un código más robusto.

Definiendo Tipos

Supongamos que la API devuelve un objeto con la siguiente estructura:

{
  "id": 1,
  "name": "John Doe",
  "email": "[email protected]"
}

Podemos definir un tipo para esta respuesta en TypeScript:

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

Usando el Tipo en la Petición

import axios from 'axios';

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

axios.get<User>('https://api.example.com/user/1')
  .then(response => {
    const user: User = response.data;
    console.log(user.name);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Ejemplo Práctico

Vamos a crear un ejemplo práctico donde realizamos una petición a una API pública y mostramos los datos en la consola.

Paso 1: Definir el Tipo

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

Paso 2: Realizar la Petición

import axios from 'axios';

axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    const posts: Post[] = response.data;
    posts.forEach(post => {
      console.log(`Title: ${post.title}`);
      console.log(`Body: ${post.body}`);
    });
  })
  .catch(error => {
    console.error('Error:', error);
  });

Ejercicios Prácticos

Ejercicio 1: Obtener Usuarios

  1. Define un tipo User con las propiedades id, name, username, y email.
  2. Realiza una petición GET a https://jsonplaceholder.typicode.com/users.
  3. Muestra los nombres de los usuarios en la consola.

Ejercicio 2: Crear un Nuevo Post

  1. Define un tipo NewPost con las propiedades userId, title, y body.
  2. Realiza una petición POST a https://jsonplaceholder.typicode.com/posts para crear un nuevo post.
  3. Muestra la respuesta en la consola.

Soluciones

Solución Ejercicio 1

import axios from 'axios';

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

axios.get<User[]>('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    const users: User[] = response.data;
    users.forEach(user => {
      console.log(user.name);
    });
  })
  .catch(error => {
    console.error('Error:', error);
  });

Solución Ejercicio 2

import axios from 'axios';

interface NewPost {
  userId: number;
  title: string;
  body: string;
}

const newPost: NewPost = {
  userId: 1,
  title: 'My New Post',
  body: 'This is the content of my new post.'
};

axios.post<NewPost>('https://jsonplaceholder.typicode.com/posts', newPost)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Conclusión

En esta sección, hemos aprendido cómo trabajar con APIs en TypeScript. Hemos visto cómo realizar peticiones HTTP usando Fetch y Axios, cómo definir tipos para las respuestas de las APIs y cómo usar estos tipos para manejar las respuestas de manera segura. Los ejercicios prácticos te ayudarán a reforzar estos conceptos y a aplicarlos en tus propios proyectos.

En el próximo módulo, profundizaremos en el manejo de errores y patrones asíncronos avanzados para mejorar aún más nuestras habilidades en la programación asíncrona con TypeScript.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados