Tipando respuestas HTTP

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

Les comparto mis apuntes. 😄

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

no se dice “asainc” ==> se dice “eisinc”

Les dejo la extensión para VSCode

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

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,

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.

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

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;
}

Excelente en verdad si que estoy aprendiendo mucho!!

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

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

Herramienta para convertir un objeto en una interfaz.

:0 enamorado de TS

Excelente clase!

TypeScript me sigue sorprendiendo 😮

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