Angular中修改http.get泛型参数映射响应为Hero数组报错如何解决

报错原因 #

Angular 中 this.http.get<T>() 的泛型参数 T 用于声明服务端返回的响应体的实际类型。你修改代码时将泛型指定为 Hero[]，等于主动告诉 TypeScript 该接口直接返回英雄数组，但结合你给出的服务端响应结构可以确认，接口返回的根对象是携带 _embedded 字段的 EmbeddedResponse 类型，并非直接的英雄数组。
此时上游 Observable 的类型被你错误声明为 Observable<Hero[]>，但后续 map 操作符却把输入参数定义为 EmbeddedResponse 类型，二者类型不匹配，因此 TypeScript 抛出类型校验错误，提示 Hero[] 类型上不存在必填的 _embedded 属性。

解决方法 #

直接将 http.get 的泛型参数指定为你已经定义好的 EmbeddedResponse 类型即可，既不需要用 any 绕过类型校验，也不需要错误指定为 Hero[]。
另外你原有代码存在语法小问题：catchError 被误写在了 tap 的参数中，二者属于平级的操作符，需要都放在 pipe 的参数列表里，修正后的完整代码如下：

getHeroes(): Observable<Hero[]> {
  const heroes = this.http.get<EmbeddedResponse>(this.heroesUrl)
    .pipe(
      map((res: EmbeddedResponse) => res._embedded.heroes),
      tap(data => this.log('HeroService: fetched Heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', []))
    )
  return heroes
}

内容的提问来源于stack exchange，提问作者Vultimitavin