属性 'connect' 在类型 'Observable<any>' 上不存在 | RXJS多播

Property 'connect' does not exist on type 'Observable<any>' | RXJS multicast

我有一个产生单播值的 Observable(对所有观察者都是单独的)。但是当我要使用 RxJs 多播运算符转换为多播时,它 return 出现以下错误。

Property 'connect' does not exist on type 'Observable'

单播(工作代码)-

let source4$ = interval(1000).pipe(take(4));

source4$.subscribe(val => {
    console.log(`Observer 1: ${val}`);
});

setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 2: ${val}`);
    }); 
}, 1000);
setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 3: ${val}`);
    }); 
}, 2000);

多播(代码无效)-

let source4$ = interval(1000).pipe(take(4), multicast(new Subject()));

source4$.subscribe(val => {
    console.log(`Observer 1: ${val}`);
});

setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 2: ${val}`);
    }); 
}, 1000);
setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 3: ${val}`);
    }); 
}, 2000);

source4$.connect();

你在这里实际上是正确的。 multicast 运算符实际上是 returns ConnectableObservable (https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/multicast.ts#L54) 的一个实例。

这只是 TypeScript 类型的一个问题,其中 pipe() 总是 returns 只是 Observable:(https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts#L301-L311).

这已被报告,在 RxJS 的 GitHub 页面中有一个未解决的问题:https://github.com/ReactiveX/rxjs/issues/2972

最简单的解决方法是强制覆盖返回的 Observable:

const source4$ = interval(1000).pipe(...) as ConnectableObservable<number>

您可以通过不使用 pipe() 函数连接您的运营商来绕过它, 因为它所做的只是调用 multicast().

返回的函数

例如:observable.pipe(take(5))等同于take(5)(observable)

这种方式的唯一问题是,TypeScript 无法推断 Observable 的类型。因此,您必须在创建主题时指定它。

let source4$ = multicast(new Subject<number>())(interval(1000).pipe(take(4)));

source4$.subscribe(val => {
    console.log(`Observer 1: ${val}`);
});

setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 2: ${val}`);
    }); 
}, 1000);
setTimeout(function() {
    source4$.subscribe(val => {
        console.log(`Observer 3: ${val}`);
    }); 
}, 2000);

source4$.connect();