19.02.2022 a las 10:25
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...
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 {}
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);
});
}
{
"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
]
}
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.
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.
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 馃憢
Software
IoT
Digitalizaci贸n
Aplicaciones m贸viles
Consultor铆a