Tipando respuestas HTTP

Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Contenido del curso

Introducción

1
¿Ya tomaste el Curso de TypeScript: Tipos Avanzados y Funciones?
05:16 min

Fundamentos de POO

POO Avanzada

Asincronismo y consumo de APIs

Genéricos

Próximos pasos

25
¿Quieres más cursos de TypeScript?
01:20 min

Tomar examen

Tipando respuestas HTTP

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Comentarios22

luis onate

Estudiante

Hace 4 años

Una forma alternativa de realizar peticiones Https con ASYNC o THEN, ya que a muchos como yo no les gusta depender de una libreria externa.

ASYNC

const getProducts = async (url: string): Promise<Welcome[]> => {
  let data = await fetch(url);
  let res: Promise<Welcome[]> = data.json();
  console.log(res);
  return res;
};

getProducts("https://api.escuelajs.co/api/v1/products");

THEN

const getProducts2 = (): Promise<Welcome[]> => {
  return fetch("https://api.escuelajs.co/api/v1/products")
    .then((res) => res.json())
    .then((json: Welcome[]) => {
      console.log(json);
      return json;
    });
};

getProducts2()

Fabricio Orrala

Estudiante

Hace 3 años

Gracias por el aporte!

Axel Enrique Galeed Gutierrez

Estudiante

Hace 4 años

Les comparto mis apuntes. :D

Quicktype

Esta página transforma nuestro archivo JSON en el tipado que le corresponde al mismo para poder tipar nuestras repuestas HTTP.

Tipado en funciones asíncronas con peticiones HTTP

Es importante poder tipar tanto nuestras funciones, ya sea inferidamente o explícitamente, como las variables que manejamos internamente dentro de ella.

Tipado en Axios

Aserción angle bracket

Axios nos permite tipar las peticiones que hacemos de la siguiente manera.

const { data } = axios.get<dataType>(URL);

Aserción AS

También podemos realizar el tipado por medio de aserción de tipos con as, pero lo ideal es hacerlo con el primer método.

async function getProductsAsync () {
    const rta = await axios.get(URL);
    const data = rta.data as Product[];
    return data;
}

Código de la clase

import axios from 'axios';
import { Product } from './models/product.model';

const URL = 'https://api.escuelajs.co/api/v1/products';

// let anyVar: any = 12;
// let boolVar: boolean = anyVar;

(async () => {
    
    // async function getProductsAsync (): Promise<Product[]> {
    //     const { data } = await axios.get(URL);
    //     return data;
    // }

    // async function getProductsAsync () {
    //     const { data } = await axios.get<Product[]>(URL);
    //     return data;
    // }

    async function getProductsAsync () {
        const rta = await axios.get(URL);
        const data = rta.data as Product[];
        return data;
    }

    const products = await getProductsAsync();
    console.log(products.map(({id, title}) => `${id} - ${title}`));
})()

Juan Camilo Cruz Franco

Estudiante

Hace 4 años

no se dice "asainc" ==> se dice "eisinc"

Enrique Manuel Sánchez Castañeda

Estudiante

Hace un año

el que apenas sabe el verbo to be xD

Rodrigo Isaac Carrera Estrada

Estudiante

Hace 7 meses

En el 2026 fetch ya se soporta de forma nativa en Node JS.

La forma de tipar la respuesta de fetch podria ser asi:

async function getProductsAsync(): Promise<Product[]> {
    const response = await fetch("https://api.escuelajs.co/api/v1/products").then(res => res.json()) as Product[];
    return response;
  }

Ivan Sangueza Alarcon

Estudiante

Hace 4 años

Les dejo la extensión para VSCode

https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Christian Camilo Guzman Zapata

Estudiante

Hace un año

Gracias justo la estaba buscando ^^

Steve Anthony Luzquiños Agama

Estudiante

Hace 4 años

Este tipo de tipado se llama: Genérico, estaría buenísimo si Platzi hiciera un curso de tipos Genéricos avanzados, ya que soy muy útiles.

Diego Andres Gonzalez Marrugo

Estudiante

Hace 3 años

Lo que me causa curiosidad sobre Typescript es como automaticamente puede mapear los datos hacia un objeto, a diferencia de otros lenguajes como Java o PHP se necesita un mapeador de datos para lograr esta funcionalidad,

Bryan Key

Estudiante

Hace 2 años

Creo ojo CREO, que es porque typescript como tal, solo por detras le coloca el tipado a javascript, osea transforma a JS y JS solo se encarga de hacer validaciones directas en el codigo, no es una magia digamoslo asi.

Cesar More Sanchez

Estudiante

Hace 4 años

Chicos, esto de poder tipar las respuestas HTTP es muy importante y te ahorrarás muchos dolores de cabeza cuando ya estés trabajando. Cuando trabajaba con JS puro tenía demasiados errores por undefined o null ya que muchos de los campos que me envían las API aún no están definidas y terminaba rompiendo mi app cada vez que avanzaba.

yeferson soto

Estudiante

Hace 3 años

agrego codigo que puede probar con la version de nodejs del 2023 sin librerias

//import fetch from "node-fetch"; test con node
const API_URL = 'https://api.escuelajs.co/api/v1/products';
import {Product} from './product.model';
const request = new Request(API_URL);//aqui personalizo las peticiones
//tipado hacia afuera
const getProductsFetch = async ():Promise<Product[]> => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response = await promise.json();
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
(async ()=>{
	const products = await getProductsFetch();
	console.log(products.map(({id, title})=>`${id} - ${title}`));
})();
//tipado hacia adentro
const getProductsFetchV2 = async () => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response:Product[] = await promise.json();
		console.log(response.map(item=>`${item.price}`));
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
getProductsFetchV2();

//cuando el metodo no soporta tipado

const getProductsFetchV3 = async () => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response = await promise.json() as Product[];
		console.log(response.map(item=>`${item.creationAt}`));
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
getProductsFetchV3();

Jean Paul Yepes

Estudiante

Hace 3 años

Hay otra manera para tipar el retorno como un arreglo de Productos, se puede usar el destructuring para tipar data:

 async function getProducts() {
    const { data } : { data: Product[]} = await axios.get<Product[]>(
      'https://api.escuelajs.co/api/v1/products'
    );
    return data;
}

Fredy CM

Estudiante

Hace 4 años

Excelente en verdad si que estoy aprendiendo mucho!!

David Higuera

Estudiante

Hace 4 años

Recomiendo ampliamente la extension de Quick Type para VSCode. Es muy útil :)

Carlos Alberto De Avila Suro

Estudiante

Hace 4 meses•editado

Veamos cómo podemos hacer el tipado de esas respuestas HTTP . creamos una nueva sub carpeta dentro de src y la llamamos app dentro creamos un archivo llamado reciclamos en el el codigo anterior y lo modificamos para que quede así:

import axios from "axios";

(
    async ()=>{

        async function  getProducts(){
            const rta = await axios.get("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }
 
        const productsAsync = await getProducts()
        console.log(productsAsync)
    }
)()

Si paso el apuntador por la declaracion de getProducts vere que indica el tipo any, algo asi como lo siguiente

promise<any>

Lo cual significa que la constante productsAsync será un arreglo con tipos any, esto ¿que significa?, veamos, imaginate que tienes declarada una variable de tipó any y le asignamos cualquier cosa, digamos un numero

let anyVar: any = 12

y luego declaramos otra variable de tipo bool pero le asignamos la variable anterior, es decir anyVar

let boolVar:boolean = anyVar

aunque boolVar es de tipo boolean, ts acepta que se le asigne anyVar que contiene un número, no manda ningun error, la razón es por que any indica que podría ser cualquier cosa, incluso un valor boolean, es como quitarle a ts el poder de validar los tipos de los valores asignados a una variable de un tipo determinado, eso esta mal. Una forma de evitar estos problemas es que en lugar de usar una variable de tipo any, usar una de tipo unknow que al menos permite hacer una validación de tipos, sin embargo lo mejor es definir el tipado correcto de nuestros productos para ello nos vamos a nuestra subcarpeta models y crearemos (por asi decirlo) un archivo llamado en el cual definimos las interfaces de nuestros productos que quedaria de la siguiente forma:

export interface Product {
    id:          number;
    title:       string;
    price:       number;
    description: string;
    category:    Category;
    images:      string[];
    creationAt:  Date;
    updatedAt:   Date;
}

export interface Category {
    id:         number;
    name:       string;
    slug:       string;
    image:      string;
    creationAt: Date;
    updatedAt:  Date;
}

Nota: para generar el codigo anterior hemos usado la pagina de , donde indicamos que solamente usaremos ts, pegamos un objeto de ejemplo y nos genera el codigo para la interfaz de manera automática.

Como se ve generó también la interfaz Category ya que nuestro objeto contiene un subobjeto que también debe ser tipado con otra interfaz por lo tanto separamos ese codigo de Category, creamos otro archivo llamado y ahi ponemos el codigo de la categoria para seguir el principio de separación de problemas y poder maximizar la reutilización del codigo y otros beneficios. ahora este archivo category,models.s contiene la interface de categorias, entonces lo importamos desde

import {Category} from "./category.model";

Ahora estas interfases nos serviran para tipar la salida de la promesa en la función getProducts, primero debemos importar la interface

import {Product} from "./models/products.model"

Y después indicar el tipo con <Product[]> (esta es la notacion de los tipos genéricos)

 async function  getProducts(): Promise<Product[]>{
            const rta = await axios.get("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }

Aquí estás diciendo: “Axios, espero que la respuesta tenga como data un arreglo de productos.”

También Axios soporta este tipo de tipado prodirmos cambiar la funcion de la siguiente manera:

(
    async ()=>{
        async function  getProducts(){
            const rta = await axios.get <Product[]>("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }
 
        console.log("-".repeat(30))
        const productsAsync = await getProducts()
        // console.log(productsAsync)
        productsAsync.map(item=>{
            console.log(id -> ${item.id} Description-> ${item.title})
        })
    }
)()

Con lo cual cambió de lugar el tipado genético, se pasa a la asignación rta que hacemos a la variable.

En caso de que estemos usando una libreria que no soporte el tipado, podriamos forzarlo de la siguiente manera

const data = rta.data as Product[]

Carlos S. Aldazosa

Estudiante

Hace 4 años

Entonces dejarlo de esta manera sería redundante?

  async function getProducts(): Promise<Product[]> {
    const { data } = await axios.get<Product[]>('https://api.escuelajs.co/api/v1/products');
    return data;
  }

Andrés Felipe Eslava Zuluaga

Estudiante

Hace 4 años

No es que sea redundante. VS Code ya entiende el valor inferido que tiene la respuesta de get. Lo que significa es que al momento de crear la promesa y solo tener una devolución de su respuesta, TS y el editor entienden qué se devuelve de la función. Incluso, en la forma que lo estás expresando, es un poco más verbose, que lo hace muucho más explícito.

Carlos S. Aldazosa

Estudiante

Hace 4 años

Gracias por la aclaración!

Alfonso Neil Jiménez Casallas

Estudiante

Hace 2 años

se te fue un } de más, Nicobytes

Christian Velázquez

Estudiante

Hace 2 años

Platzi Store: https://fakeapi.platzi.com/

Ronaldo Delgado

Estudiante

Hace 3 años

excelente como typescript nos ayuda con nuestra programación

Angel Hernandez

Estudiante

Hace 3 años

interesante ahora con chat-gpt puedo tener el mismo resultado (o muy similar) de lo que puede hacer quicktype. Aqui mi ejemplo:

interface Category {
  id: number;
  name: string;
  image: string;
  creationAt: string;
  updatedAt: string;
}

interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  images: string[];
  creationAt: string;
  updatedAt: string;
  category: Category;
}

type Products = Product[];

Paola Alapizco

Estudiante

Hace 3 años

Herramienta para convertir un objeto en una interfaz.

Diego Raciel Ortega Hernandez

Estudiante

Hace 3 años

:0 enamorado de TS

const getProducts = async (url: string): Promise<Welcome[]> => {
  let data = await fetch(url);
  let res: Promise<Welcome[]> = data.json();
  console.log(res);
  return res;
};

getProducts("https://api.escuelajs.co/api/v1/products");

const getProducts2 = (): Promise<Welcome[]> => {
  return fetch("https://api.escuelajs.co/api/v1/products")
    .then((res) => res.json())
    .then((json: Welcome[]) => {
      console.log(json);
      return json;
    });
};

getProducts2()

import axios from 'axios';
import { Product } from './models/product.model';

const URL = 'https://api.escuelajs.co/api/v1/products';

// let anyVar: any = 12;
// let boolVar: boolean = anyVar;

(async () => {
    
    // async function getProductsAsync (): Promise<Product[]> {
    //     const { data } = await axios.get(URL);
    //     return data;
    // }

    // async function getProductsAsync () {
    //     const { data } = await axios.get<Product[]>(URL);
    //     return data;
    // }

    async function getProductsAsync () {
        const rta = await axios.get(URL);
        const data = rta.data as Product[];
        return data;
    }

    const products = await getProductsAsync();
    console.log(products.map(({id, title}) => `${id} - ${title}`));
})()

async function getProductsAsync(): Promise<Product[]> {
    const response = await fetch("https://api.escuelajs.co/api/v1/products").then(res => res.json()) as Product[];
    return response;
  }

//import fetch from "node-fetch"; test con node
const API_URL = 'https://api.escuelajs.co/api/v1/products';
import {Product} from './product.model';
const request = new Request(API_URL);//aqui personalizo las peticiones
//tipado hacia afuera
const getProductsFetch = async ():Promise<Product[]> => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response = await promise.json();
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
(async ()=>{
	const products = await getProductsFetch();
	console.log(products.map(({id, title})=>`${id} - ${title}`));
})();
//tipado hacia adentro
const getProductsFetchV2 = async () => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response:Product[] = await promise.json();
		console.log(response.map(item=>`${item.price}`));
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
getProductsFetchV2();

//cuando el metodo no soporta tipado

const getProductsFetchV3 = async () => {
	try {
		const promise = await fetch(request);
		if(!promise.ok){
			throw new Error(`Error ${promise.status}: Failed Connection to Server`);
		}
		const response = await promise.json() as Product[];
		console.log(response.map(item=>`${item.creationAt}`));
		return response;
	} catch (error) {
		console.error(error);
		return [];
	}
}
getProductsFetchV3();

import axios from "axios";

(
    async ()=>{

        async function  getProducts(){
            const rta = await axios.get("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }
 
        const productsAsync = await getProducts()
        console.log(productsAsync)
    }
)()

export interface Product {
    id:          number;
    title:       string;
    price:       number;
    description: string;
    category:    Category;
    images:      string[];
    creationAt:  Date;
    updatedAt:   Date;
}

export interface Category {
    id:         number;
    name:       string;
    slug:       string;
    image:      string;
    creationAt: Date;
    updatedAt:  Date;
}

 async function  getProducts(): Promise<Product[]>{
            const rta = await axios.get("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }

(
    async ()=>{
        async function  getProducts(){
            const rta = await axios.get <Product[]>("https://api.escuelajs.co/api/v1/products")
            return rta.data
        }
 
        console.log("-".repeat(30))
        const productsAsync = await getProducts()
        // console.log(productsAsync)
        productsAsync.map(item=>{
            console.log(id -> ${item.id} Description-> ${item.title})
        })
    }
)()

interface Category {
  id: number;
  name: string;
  image: string;
  creationAt: string;
  updatedAt: string;
}

interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  images: string[];
  creationAt: string;
  updatedAt: string;
  category: Category;
}

type Products = Product[];

Tipando respuestas HTTP

Introducción

¿Ya tomaste el Curso de TypeScript: Tipos Avanzados y Funciones?

Fundamentos de POO

Class

Métodos

Acceso público

Acceso privado

Constructor

Getters

Setters

POO Avanzada

Herencia

Acceso protegido

Static

Interfaces

Clases abstractas

Singleton: constructor privado

Asincronismo y consumo de APIs

Promesas

Tipando respuestas HTTP

Proyecto: migración de funciones a clases

Consumiendo ProductMemoryService

ProductHttpService

Consumiendo ProductHttpService

Genéricos

Generics

Generics en clases

Generics en métodos

Decoradores

Próximos pasos

¿Quieres más cursos de TypeScript?

Todos los cursos GRATIS