RXJS Observable.of() 作为 HttpInterceptor 中的 Observable<HttpEvent<any>>答案

【问题标题】：RXJS Observable.of() as a Observable<HttpEvent<any>> in HttpInterceptorRXJS Observable.of() 作为 HttpInterceptor 中的 Observable<HttpEvent<any>>
【发布时间】：2018-07-16 17:02:28
【问题描述】：

我有一个 Angular 的 HttpInterceptor 看起来像这样：

(...)

export class CacheInterceptor implements HttpInterceptor {

  constructor(private cache: CacheService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

   const cachedResponse = this.cache.restore(req); // Object with cached data

   return cachedResponse ?
     of(cachedResponse): this.sendRequest(req, next);

(...)
}

一般来说，它最终似乎可以工作，但 Angular 的编译器抱怨显示类型不匹配的错误：

cache.interceptor.ts(27,5) 中的错误：错误 TS2322：>Type 'Observable> | Observable' 不可分配给 >type 'Observable>'。类型 'Observable' 不可分配给类型 >'Observable>'。类型“字符串”不可分配给类型“HttpEvent”。

在 Angular 文档中可以找到几乎相同的示例。

这里的问题是of(cachedResponse) 不是Observable<HttpEvent<any>> 类型而是Observable<string>。

我尝试了很多方法，但我想不出什么是最好的解决方案。是否有可能以任何方式将缓存数据转换为Observable<HttpEvent<any>> 类型，或者可能有另一种修复它的好方法？我知道我可以为我的案例提供我自己的 HttpInterceptor 接口和适当的类型，甚至简单地删除 HttpInterface 引用，但这些可能不是最好的解决方案，尤其是后者。有人吗？

【问题讨论】：

标签： angular rxjs angular5 rxjs5 angular-http-interceptors

【解决方案1】：

如果您无法更改 CacheService 的类型，这就是我对您的问题的看法，那么您可以只使用类型断言：

const cachedResponse = this.cache.restore(req) as HttpEvent<any>;

请注意，类型断言不会修改数据；它只是告诉 Typescript 编译器您知道该类型就是您声称的类型。

然而，理想情况下，CacheService#restore 是通用定义的，在这种情况下

const cachedResponse = this.cache.restore<HttpEvent<any>>(req);

会起作用的。从功能上讲，它完全相同并且没有区别，但这取决于 restore 是否正确输入。因为我不知道你的情况是什么CacheService，所以我不知道是不是这样。

【讨论】：