No tienes acceso a esta clase

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

Tipando respuestas HTTP

16/25
Recursos

Aportes 13

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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

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.

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 鈥渁sainc鈥 ==> se dice 鈥渆isinc鈥

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

Excelente en verdad si que estoy aprendiendo mucho!!

Recomiendo ampliamente la extension de Quick Type para VSCode. Es muy 煤til 馃槂

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 clase!

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.

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

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.