Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Tipando respuestas HTTP

16/25
Recursos

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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;
}

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