Tipar respuestas HTTP en Angular

Deja de tipar con any 馃毄 las respuestas HTTP en Angular (TypeScript)

19.02.2022 a las 10:25

Tipar respuestas HTTP en Angular

Personalmente, lo que m谩s me gusta de Angular es que usa TypeScript.


Tambi茅n me encanta que use el patr贸n de inyecci贸n de dependencias y varias cosas m谩s, pero sin duda, lo que m谩s me gusta es que usa TypeScript.


Para aprovechar al m谩ximo las virtudes de TypeScript, debemos de evitar usar el tipo any siempre que podamos. A continuaci贸n te voy a explicar c贸mo tipar las respuestas HTTP al realizar una petici贸n con el HTTPClient de @angular/common/http.

Las ventajas de tipar correctamente son autocompletado, evitar errores en el nombre de los campos, menos errores...

Praparando el proyecto de Angular para usar el HTTPClient

Para poder trabajar con el HTTPClient, debes importar el HttpClientModule en el app.module.ts y as铆 lo tendr谩s disponible en el proyecto.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [    
    AppRoutingModule,    
    HttpClientModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

  

Haciendo una petici贸n HTTP a la API de Pokemon

Para explicar este art铆culo voy a usar la API de Pokemon que no requiere autenticaci贸n como s铆 lo requiere la API de Marvel.


Inyectamos el HttpClient en el constructor del componente, constructor(private http:HttpClient) {}


Aseg煤rate que se importa de @angular/common/http, import { HttpClient } from '@angular/common/http';


Hacemos una petici贸n GET HTTP al endpoint https://pokeapi.co/api/v2/pokemon, e imprimiremos la respuesta por consola.



import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tipando-respuestas-http',
  templateUrl: './tipando-respuestas-http.component.html',
  styles: [
  ]
})
export class TipandoRespuestasHTTPComponent {

  constructor(private http:HttpClient) {    
    this.aBailar();
  }
  private aBailar():void{
    this.http.get('https://pokeapi.co/api/v2/pokemon').subscribe((resp:any) => {
      console.log(resp);
    });
  }
  

Resultado del console.log


  {
    "count": 1118,
    "next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
    "previous": null,
    "results": [
      {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon/1/"
      },
      {
        "name": "ivysaur",
        "url": "https://pokeapi.co/api/v2/pokemon/2/"
      },
      ... // y otros 18 pokemons m谩s       
    ]
  }
  

Creando nuestras interfaces

Para tipar la respuesta, lo primero que necesitamos es crear el o los tipos a los que tendremos que tipar la respuesta. Para ello me ayudo de quicktype.io.


QuickType.io es una herramienta donde le pegas la respuesta en JSON y te crea las interfaces. No s贸lo para TypeScript, tambi茅n soporta otros lenguajes.

quicktype.io image

Creamos nuestras nuevas interfaces, para ello crea un nuevo fichero .ts y pega el c贸digo generado por quicktype.io


export interface Welcome {
    count:    number;
    next:     string;
    previous: null;
    results:  Result[];
}

export interface Result {
    name: string;
    url:  string;
}
  

Ni que dicer tiene que si no te gusta el nombre que quicktype asigna a las interfaces las cambies como m谩s te guste.


C贸digo final

Para terminar quitamos el tipo de la respuesta any y a帽adimos como tipo de salida de la petici贸n get el tipo Welcome (o el nombre que le hayas dado) entre angle brackets.


Si quieres saber que son los angle brackets y la pronunciaci贸n de otros caracteres de programaci贸n puedes consultar mi art铆culo en donde lo explico.


El c贸digo final ser铆a:


import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Welcome } from '../models/Welcome.ts';

@Component({
  selector: 'app-tipando-respuestas-http',
  templateUrl: './tipando-respuestas-http.component.html',
  styles: [
  ]
})
export class TipandoRespuestasHTTPComponent {

  constructor(private http:HttpClient) {    
    this.aBailar();
  }
  private aBailar():void{
    this.http.get<Welcome>('https://pokeapi.co/api/v2/pokemon').subscribe((resp) => {
      console.log(resp);
    });
  }
  

馃ぉ Ya podr谩s disfrutar de todas las ventajas del tipado, autocompletado, menos errores, m谩s tranquilidad...


Hasta luego 馃憢

Servicios

Software

IoT

Digitalizaci贸n

Aplicaciones m贸viles

Consultor铆a

fjmduran.com v0.1.2