Partial<Observer<unknown>> error when trying to type next value in subscribe

Issue

I've created a rxjs stream with a couple of operators in it, which I will show you in a bit, but first I would like to describe the error

I have the following (simplified)

return fromEvent(....).pipe(
  ....
).subscribe((output: IOutput<IData>) => ....); // <-- error

CODE

Unfortunately the stackblitz demo doesn't give any errors, it happens in my IDE only. The error I get is

No overload matches this call.
  Overload 1 of 3, '(observer?: Partial<Observer<unknown>> | undefined): Subscription', gave the following error.
    Type '(output: IOutput<IData>) => void' has no properties in common with type 'Partial<Observer<unknown>>'.
  Overload 2 of 3, '(next: (value: unknown) => void): Subscription', gave the following error.
    Argument of type '(output: IOutput<IData>) => void' is not assignable to parameter of type '(value: unknown) => void'.
      Types of parameters 'output' and 'value' are incompatible.
        Type 'unknown' is not assignable to type 'IOutput<IData>'.
  Overload 3 of 3, '(next?: ((value: unknown) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription', gave the following error.
    Argument of type '(output: IOutput<IData>) => void' is not assignable to parameter of type '(value: unknown) => void'.
      Types of parameters 'output' and 'value' are incompatible.
        Type 'unknown' is not assignable to type 'IOutput<IData>'.ts(2769)

The weird thing is that I can let the error go away if I comment out one of the operators

Here I commented out the tap operator, but the same thing happens when I comment out that filter operator.

Another way to fix this, is to rewrite the subscribe into

 .subscribe((output)  => observer.next(output as IOutput<IData>));

But whatever I do, I no clue what is going on here. For example, how can commenting out that tap operator solve the error.

Any help would be appreciated!

Solution

The problem doesn't show up on StackBlitz due to the tsconfig settings (probably strictFunctionTypes), but you can reproduce it in a TypeScript playground.

The issue is that the rxjs type definitions only type pipe overloads for up to 10 arguments. Beyond 10, the result type becomes Observable<unknown>.

You can fix it by chaining pipes together once you reach ten operators:

const sub = fromEvent<Event>(document, 'click', { capture: true })
  .pipe(
    xPreventPropagation$<Event>(),
    ..
    tap((update) => console.log('test3')))
  .pipe(
    map<IData, IOutput<IData>>((update: IData) => ({
      result: update,
    }))
  )
  .subscribe((output: IOutput<IData>) => observer.next(output));

TypeScript playground

Answered By - Oblosys