Tipando respuestas HTTP

Clase 16 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

luis onate

student•

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

student•

Gracias por el aporte!

Axel Enrique Galeed Gutierrez

student•

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

student•

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

Enrique Manuel Sánchez Castañeda

student•

el que apenas sabe el verbo to be xD

Ivan Sangueza Alarcon

student•

Les dejo la extensión para VSCode

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

Christian Camilo Guzman Zapata

student•

Gracias justo la estaba buscando ^^

Steve Anthony Luzquiños Agama

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

Excelente en verdad si que estoy aprendiendo mucho!!

David Higuera

student•

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

Carlos S. Aldazosa

student•

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

student•

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

student•

Gracias por la aclaración!

Alfonso Neil Jiménez Casallas

student•

se te fue un } de más, Nicobytes

Christian Velázquez

student•

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

Ronaldo Delgado

student•

excelente como typescript nos ayuda con nuestra programación

Angel Hernandez

student•

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

student•

Herramienta para convertir un objeto en una interfaz.

Diego Raciel Ortega Hernandez

student•

:0 enamorado de TS

Andrés Felipe Eslava Zuluaga

student•

Excelente clase!

Miguel Angel Reyes Moreno

student•

TypeScript me sigue sorprendiendo :o

Tipando respuestas HTTP

Para ayudarnos del tipado de lo que esperamos de las respuestas, podemos usar quicktype

También existe una extensión de VS code llamada 'Paste JSON as Code'.

import axios from "axios"

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

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

  const products = await getProducts()
  console.log(products.map(item => `${item.id} - ${item.title}`))
})()

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}`));
})()

//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();

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[];

import axios from "axios"

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

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

  const products = await getProducts()
  console.log(products.map(item => `${item.id} - ${item.title}`))
})()

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?