javascript - Tipul 'Observable<Object>' nu poate fi atribuit tipului 'Observable<IUser[]>'


În serviciul meu Api am această funcție simplă getUsers pentru a prelua toți utilizatorii de pe api.

public getUsers(url: string): Observable<IUser[]>  {
  return this._http.get(url);
} 

Aceasta este interfața mea IUser, am făcut toate câmpurile opționale pentru moment.

export interface IUser {
  id?: string;
  first_name?: string;
  last_name?: string;
  location?: string;
  followers?: string;
  following?: string;
  checkins?: string;
  image?: string;
}

și iată cum am folosit serviciul în componenta mea:

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

și aceasta este eroarea de tip pe care o primesc când se compilează

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'.

Am crezut că acest lucru s-ar putea datora faptului că răspunsul meu nu corespunde interfeței, pe care am verificat-o de două ori și corespunde. Și, de asemenea, am făcut câmpul opțional pentru moment pentru a fi sigur.

Știu că pot rezolva asta prin convertirea observable-ului la any, dar oare asta nu încalcă scopul folosirii Typescript?

Orice ajutor privind unde greșesc ar fi grozav

Mulțumesc anticipat

Răspuns #1

Există două moduri de a face acest lucru, și depinde de versiunea de RxJS/Angular pe care o folosești. Iată cele două moduri de a face acest lucru în funcție de versiunea ta:

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

Răspunsul #2

Tipic, la 5 minute după ce postez, găsesc o soluție.

Trucul a fost să faci casting funcției .get în serviciu la același tip ca funcția getUsers, așa cum este mai jos:

public getUsers(url: string): Observable<IUser[]>  {
    return this._http.get<IUser[]>(url);
  }

Sper că acest lucru îi ajută și pe alți oameni