具有打字稿联合类型的 RxJS 自定义运算符

Question

我有以下型号：

export interface IModel<T> {
 exp: number,
 value: T
}

我想创建一个自定义的 RxJS 运算符，例如：

private customOperator<U extends A | B, T extends IModel<U>>(custom: Observable<T>): Observable<U> {
    return custom.pipe(map((x: T) => x.value ));
  }

但我在使用时遇到类型错误：

  mySub:  = new Subject<IModel<A>>;
  myObs$: Observable<A> = this.mySub.asObservable().pipe(this.customOperator); // <== ERROR

错误：无法分配类型'Observable' 来输入'Observable'。

关于如何更改自定义运算符以避免问题的任何想法？

Answer 1

将操作符包装在工厂函数中。

private customOperator<T extends IModel<U>, U extends A | B> () {
  return (custom: Observable<T>): Observable<U> =>
   custom.pipe(map((x: T) => x.value ));
}

然后在管道中使用操作符作为函数调用而不是函数引用。

myObs$: Observable<A> = this.mySub.asObservable().pipe(this.customOperator());

干杯

Answer 2

您需要使用 Typescript type assertion 功能。

在您的情况下，编译器会抱怨，因为 myObs$ 必须 是 Observable<A> 类型，而您的自定义运算符可以返回 either Observable<A> orObservable<B>。

因此，如果您想避免该错误，您需要向 Typescript 保证您的自定义运算符肯定会返回 Observable<A>。这是避免对 Typescript 编译器进行合法检查的技巧，因此您最好确保自己做的是正确的事情。

所以代码应该是这样的

myObs$: Observable<A> = this.mySub.asObservable().pipe(this.customOperator) as Observable<A>;

或者，更简单的

myObs$ = this.mySub.asObservable().pipe(this.customOperator) as Observable<A>;

如果您将鼠标悬停在 myObs$ 上，例如在 VSCode 中，您将看到为 myObs$ 推断的类型实际上是 Observable<A>，即使您没有指定类型（至少在代码的最后一个版本中） )

更新基于@akotech 的回复

处理这种情况的更好方法是@akotech 提出的方法。

customOperator 如下编码返回Observable<U>

private customOperator<T extends IModel<U>, U extends A | B> () {
  return (custom: Observable<T>): Observable<U> =>
   custom.pipe(map((x: T) => x.value ));
}

有趣的是，至少在我的情况下，如果我没有像这一行那样声明myObs$ 的类型

myObs$ = mySub.pipe(customOperator_())

为myObs$ 推断的类型是Observable<A | B>，但同时，如果我尝试这样的事情

myObs$: : Observable<B> = mySub.pipe(customOperator_())

我从编译器得到一个错误Type 'Observable' is notassignable to type 'Observable'，这是正确的，因为mySub 通知了IModel<A> 类型的对象.

同时，如果我尝试这样的事情

myObs$: : Observable<A> = mySub_A.pipe(customOperator_())

编译器没有引发错误，这又是正确的。

所以@akotech 提出的解决方案比我提出的解决方案更安全。