web-dev-qa-db-ja.com

タイプ 'Observable <Object>'は、タイプ 'Observable <IUser []>'に割り当てられません

Apiサービスには、API上のすべてのユーザーを取得するためのこの簡単なgetUsers関数があります。

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

これは私のIUserインターフェイスです。今のところ、すべてのフィールドをオプションにしました。

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

そして、私のコンポーネントでこのサービスをどのように使用したかを以下に示します。

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

これはコンパイル時に表示されるTypeエラーです

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

これは、私の応答がインターフェイスと一致しないためだと考えました。また、確認のために、このフィールドをオプションにしました。

Observableをanyとしてキャストすることでこれを修正できることは知っていますが、Typescriptを使用することのポイントを無効にしないのでしょうか？

私がどこに間違っているのかについての助けは素晴らしいでしょう

前もって感謝します

javascriptangulartypescriptinterfaceobservable
16
Sam Kelham

これを行うには2つの方法があり、使用しているRxJSのバージョン/ Angularによって異なります。バージョンに応じて2つの方法があります。

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

通常、投稿してから5分後に解決策を見つけます。

トリックは.get関数のサービスは、以下のgetUsers関数のタイプと同じです。

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

これが他の人にも役立つことを願っています

12
Sam Kelham

私の場合、以下が働いた

  getUsers(): Observable<User[]> {
      return <Observable<User[]>> this.http.get(this.pathAPI + 'user', super.header())
      .pipe(catchError(super.handleError));
   }

私はAngular 6を使用しています

3
vnextcoder