用于 Rxjs 中的地图运算符

Question

最近我刚刚了解了一些关于 rxjs 和 Angular 的知识。 当我尝试编写一个 api 来访问一些 Web 服务时。

我定义了这种类型：

    export type Banner = {
           targetId: number;
           url: string;
           imageUrl: string;
    }

服务部分是：

export class HomeService {

  constructor(private http: HttpClient,
              @Inject(API_CONFIG) private uri: string) { }

  getBanners(): Observable<Banner[]> {
    return this.http.get(this.uri + 'banner')
      .pipe(map((res: { banners: Banner[] }) => res.banners));
  }
}

而tge接收数据是这样的

{
"banners": [
{
"imageUrl": "http://p1.music.126.net/64Nc0mcg6Sjq56TzCLDpQA==/109951167536067432.jpg",
"targetId": 0,
"adid": null,
"targetType": 3000,
"titleColor": "blue",
"url": "https://music.163.com/m/at/62a19bee9c36d0102fa275f4",
"exclusive": false,
"monitorImpress": null,
"monitorClick": null,
"monitorType": null,
"monitorImpressList": null,
"monitorClickList": null,
"monitorBlackList": null,
"extMonitor": null,
"extMonitorInfo": null,
"adSource": null,
"adLocation": null,
"adDispatchJson": null,
"encodeId": "0",
"program": null,
"event": null,
"video": null,
"song": null,
"scm": "1.music-homepage.homepage_banner_force.banner.4747964.341110454.null"
},
{
"imageUrl": "http://p1.music.126.net/MLX8OCPeIzlyxGGaHz3IbQ==/109951167532698136.jpg",
"targetId": 1954420092,
"adid": null,
"targetType": 1,
"titleColor": "red",
"url": null,
"exclusive": false,
"monitorImpress": null,
"monitorClick": null,
"monitorType": null,
"monitorImpressList": null,
"monitorClickList": null,
"monitorBlackList": null,
"extMonitor": null,
"extMonitorInfo": null,
"adSource": null,
"adLocation": null,
"adDispatchJson": null,
"encodeId": "1954420092",
"program": null,
"event": null,
"video": null,
"song": null,
"scm": "1.music-homepage.homepage_banner_force.banner.4725970.341201780.null"
}
}

当我试图编译代码时，编译器告诉我这样的：

错误：src/app/service/home.service.ts:18:13 - 错误 TS2345：'OperatorFunction<{ 横幅：横幅 [] 类型的参数； }, Banner[]>' 不能分配给类型为 'OperatorFunction<Object, Banner[]>' 的参数。 “对象”类型可分配给极少数其他类型。 您的意思是改用“任何”类型吗？ “对象”类型中缺少属性“横幅”，但类型“{横幅：横幅[]; }'。

打字稿版本：4.5.2

角度版本：13.1.0

Answer 1

尝试指定 HTTP 客户端的响应类型：

return this.http.get<{ banners: Banner[] }>(this.uri + 'banner')
...