Angular调用Flickr接口报OperatorFunction类型不匹配错误如何解决？

Angular HttpClient 的 get 方法默认返回 Observable<Object> 类型，你没有提前给请求指定返回类型的前提下，直接在 map 操作符中给参数标注 FlickrOutput 类型，两者类型不匹配就触发了该报错。

方案1（推荐：标准类型标注） #

直接给 http.get 方法添加泛型，指定返回值类型为 FlickrOutput，修改请求代码即可：

return this.http.get<FlickrOutput>(url + params).pipe(
  map((res) => {
    // 此处res会自动推断为FlickrOutput类型，无需额外标注
    // 补充你需要处理后返回的数据，示例：
    return res.photos.photo
  })
)

该方案符合Angular官方最佳实践，从请求源头定义返回数据类型，后续所有操作符的参数类型都会自动推断，无需额外手动标注。

方案2（临时兼容：类型断言） #

如果不方便修改请求的泛型定义，也可以在map的参数中先做类型断言兼容：

return this.http.get(url + params).pipe(
  map((res: unknown) => res as FlickrOutput)
  // 后续操作拿到的就是FlickrOutput类型的数据
)

该方案仅适合临时调试场景，不推荐长期使用，没有从根源解决类型不匹配的问题。

注意事项 #

你当前的map回调函数为空，没有返回值，后续订阅该方法会拿到undefined，记得补充需要返回的处理后数据。

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