RxJs6: OperatorFunction vs MonoTypeOperatorFunction

Question

I have the following code:

export class EventsChainComponent { 
    eventSubscriber:Subscription;

    constructor (protected eventService: EventService) {}


    public registerComponentsEvent(event:any) {
        // getOnEvent signature
        // (method) EventService.getOnEvent(): Observable<FormEvent>
        this.eventSubscriber = this.eventService.getOnEvent()
            .pipe(filter((formEvent: FormEvent) => {return formEvent.key == event.event}))
            .subscribe((formEvent: FormEvent) => {
                  ..........
            });
    }

When I compile, the compiler returns the following error:

Argument of type 'MonoTypeOperatorFunction' is not assignable to parameter of type 'OperatorFunction'.

So, I search a little bit and I found the RxJs6 operator filter API:

export declare function filter<T, S extends T>(predicate: (value: T, index: number) => value is S, thisArg?: any): OperatorFunction<T, S>;
export declare function filter<T>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<T>;

As you can see, the filter as 2 overloads methods, one returning OperatorFunction and another MonoTypeOperatorFunction.

Any one can tell me the difference between this 2 types? And any one knows how can I solve this error?

Note: The FormEvent class was created by me, and both EventService and EventsChainComponent has the same import that reference to the same class.

Answer 1

for other ppl having this issue:

I had the same issue. In my case the problem was with the Event object.

Both rxjs and angular/router have an event object so there was a name collision. What I did to solve this issue is to declare the @angular/router event with a different name and then use accordingly.

{Event as RouterEvent} from '@angular/router';

So after that: I use Event when i want to use rxjs.Event and RouterEvent when i want to use the @angular/router.Event. And the error is gone :)

hope it helps

Answer 2

After the comment below, I found out the problem was that I imported the class from the same file name, but I had the same file in a different folder, under the src folder.

The only way that a MonoTypeOperatorFunction<T> is not assignable to an OperatorFunction<T,T> is if the type parameters - the Ts - are different. Saying that the function returns Observable<FormEvent> in a comment is not particularly useful. Where does FormEvent event come from? Is it the same as the FormEvent you've used in that file? Is it a class? Who knows? Not me. My guess is that you have two FormEvent classes from different libraries. Or different installs of the same library.

What I did was to remove one of the files and the error disappear.

Answer 3

The mentioned solutions didn't work for me... I found this

filter((event): event is ActivationEnd => event instanceof ActivationEnd)

Credits to https://gitmemory.com/issue/ReactiveX/rxjs/4947/518146427