类型 'Observable<Object>' 不可分配给类型 'Observable<IUser[]>'答案

【问题标题】：Type 'Observable<Object>' is not assignable to type 'Observable<IUser[]>'类型 'Observable<Object>' 不可分配给类型 'Observable<IUser[]>'
【发布时间】：2018-07-28 00:10:37
【问题描述】：

在我的 Api 服务中，我有一个简单的 getUsers 函数来获取 api 上的所有用户。

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

这是我在编译时遇到的类型错误

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 的意义吗？

任何关于我哪里出错的帮助都会很棒

提前致谢

【问题讨论】：

标签： javascript angular typescript interface observable

【解决方案1】：

有两种方法可以做到这一点，这取决于您使用的 RxJS / Angular 版本。以下是两种方法，具体取决于您的版本：

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

【讨论】：

关于 RxJS/Angular 5+ 的答案的第二部分是错误的，必须在 _.http.get 函数之后进行转换，如下所述 @sam-kelham 的答案。
@AsGoodAsItGets => 我更新了答案以反映您的回复。谢谢你告诉我！
这仍然不适合我，这正是我正在做的事情

【解决方案2】：

典型的，在我发帖 5 分钟后，我找到了解决方案。

技巧是将服务中的.get 函数与getUsers 函数上的类型相同，如下所示：

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

希望这也能帮助其他人

【讨论】：

是的，它是 HttpClientModule :)
哎呀，我花了 2 天时间才弄清楚要问哪个问题！

【解决方案3】：

在我的情况下，下面的工作

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

我正在使用 Angular 6

【讨论】：

【解决方案4】：

在我的例子中，几个参数值是一个数字类型。我需要转换成字符串来解决这个问题。

const params = new HttpParams()
    .set('someparam1', myNumberproperty1.toString())  
    .set('someparam2',myNumberproperty2.toString());

【讨论】：