No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Tipando respuestas HTTP

16/25
Recursos

Aportes 19

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Me pareci贸 bastante interesante la idea de QuickType y realic茅 una peque帽a aplicaci贸n que tambi茅n convierte formato JSON a interfaces de typescript:



Pueden probarla en https://jsontointerface.netlify.app
Repositorio: https://github.com/mecanicodev/jsontointerface


Lo hice con react y typescript, cuesta bastante al principio, pero con la ayuda de visual studio se aprende sobre la marcha, ya creo entender porque typescript es tan querido.

QuickType: https://app.quicktype.io/

**Product Response: **

{
  "id": 1,
  "title": "new title",
  "price": 10001,
  "description": "new description",
  "category": {
    "id": 5,
    "name": "Others",
    "image": "https://api.lorem.space/image?w=640&h=480&r=9682"
  },
  "images": [
    ""
  ],
  "categoryId": 1
}

Output:

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

export interface Category {
    id:    number;
    name:  string;
    image: string;
}

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

no se dice 鈥渁sainc鈥 ==> se dice 鈥渆isinc鈥

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

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.

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 馃槂

excelente como typescript nos ayuda con nuestra programaci贸n

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

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

Herramienta para convertir un objeto en una interfaz.

:0 enamorado de TS

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.

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