Tipando respuestas HTTP

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 “asainc” ==> se dice “eisinc”

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

Les dejo la extensión para VSCode

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

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