En mi servicio Api, tengo esta función getUsers simple para buscar a todos los usuarios en la API.
public getUsers(url: string): Observable<IUser[]> { return this._http.get(url); }Esta es mi interfaz IUser, he hecho que todos los campos sean opcionales por ahora.
export interface IUser { id?: string; first_name?: string; last_name?: string; location?: string; followers?: string; following?: string; checkins?: string; image?: string; }y así es como he usado el servicio en mi componente:
export class SocialOverviewContainerComponent implements OnInit { public userData = []; public showForm = {}; private _apiService: ApiService; constructor(apiService: ApiService) { this._apiService = apiService } public ngOnInit(): void { this.getUsersData(); } public getUsersData() { this._apiService.getUsers(ApiSettings.apiBasepath + 'users/') .subscribe(users => { this.userData = users; }) } }y este es el error de tipo que recibo cuando se compila
ERROR in src/app/services/api.service.ts(18,5): error TS2322: Type 'Observable<Object>' is not assignable to type 'Observable<IUser[]>'. Type 'Object' is not assignable to type 'IUser[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.Pensé que esto podría deberse a que mi respuesta no coincide con la interfaz, lo verifiqué dos veces y lo hace. Y también he hecho que el campo sea opcional por ahora para asegurarme.
Sé que puedo arreglar esto lanzando el observable como cualquiera, pero ¿eso no anula el punto de usar Typescript?
Cualquier ayuda sobre dónde me estoy equivocando sería genial.
Gracias por adelantado
Hay dos formas de hacerlo, y depende de la versión de RxJS/Angular que esté utilizando. Estas son las dos formas de hacerlo dependiendo de sus versiones:
// Using RxJS v4 / Angular v2-4. I assume that you're using the HttpModule... import 'rxjs/add/operator/map'; public getUsers(url: string): Observable<IUser[]> { return this._http.get(url) .map((response: Response) => <IUser[]>response.json()); } // Using RxJS v5 / Angular 5+ (at the moment). I assume that you're using the HttpClientModule, as the HttpModule was deprecated in Angular v4. public getUsers(url: string): Observable<IUser[]> { return this._http.get<IUser[]>(url); }Típico, que 5 minutos después de publicar, encuentro una solución.
El truco fue lanzar la función .get en el servicio del mismo tipo que en la función getUsers como se muestra a continuación:
public getUsers(url: string): Observable<IUser[]> { return this._http.get<IUser[]>(url); }Espero que esto ayude a otras personas también
en mi caso lo siguiente funcionó
getUsers(): Observable<User[]> { return <Observable<User[]>> this.http.get(this.pathAPI + 'user', super.header()) .pipe(catchError(super.handleError)); }estoy usando angular 6