Argument of type 'MonoTypeOperatorFunction<any>' is not assignable to parameter of type 'UnaryFunction<Observable<any>, Observable<any>>'

Question

i am trying to migrate from rxjs 5 to 6 but i am having difficulties. when i try this

this._connectivity.isOnline().pipe(first()).subscribe((state) => {
  this.syncCheck(user.uid);
});

i am getting this error

Argument of type 'MonoTypeOperatorFunction<any>' is not assignable to parameter of type 'UnaryFunction<Observable<any>, Observable<any>>'.
  Types of parameters 'source' and 'source' are incompatible.
    Type 'import("/home/User/Desktop/projectname/node_modules/rxjs/Observable").Observable<any>' is not assignable to type 'import("/home/User/Desktop/projectname/node_modules/rxjs/internal/Observable").Observable<a...'.
      Property 'map' is missing in type 'Observable<any>'.

Answer 1

I found the same error with my code:

let source = of([1, 2, 3, 45, 56, 7, 7])
    .pipe(
        filter((x: number) => x % 2 == 0)
    );

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

To fix this, remove type from filter function

 filter(x => x % 2 == 0)

Now you have error

The left-hand side of an arithmetic operation must be of type 'any', 'number', so make sure, that this annoying filter gets correct data type

filter(x => Number(x) % 2 == 0) // parse element to number

But now code stops work. Finally, to fix this, change of to from, at the beginning.

let source = from([1, 2, 3, 45, 56, 7, 7])
    .pipe(
        filter((x: number) => Number(x) % 2 === 0)
    )

or

let source = of(1, 2, 3, 45, 56, 7, 7)
.pipe(
        filter((x: number) => Number(x) % 2 === 0)
    )

So, cause of error was my initial data structure.

I think, that my example can help you with dealing similar problems.

Answer 2

You seem to have a wrong import for the isOnline() return type. Make sure that you always import from rxjs and never from rxjs/internal or even rxjs/internal/Observable. (Operators like first() must be imported from rxjs/operators)

Answer 3

I had similar error using pipe in one of HTTP services method (see example on the bottom). The problem was lack of typing in callback function used in subscribe. In your case, add typing (not the best idea but even any) to state or remove the parenthesis:

Solution 1:

this._connectivity.isOnline()
  .pipe(first()).subscribe((state: any) => {
    this.syncCheck(user.uid);
});

Solution 2:

this._connectivity.isOnline()
  .pipe(first()).subscribe(state => {
    this.syncCheck(user.uid);
});

Coming back to my case I've used pipe to log log the data. It required to set two possible types to the observable, then typing callback function was possible:

  public getPrice(): Observable<string | PriceDTO> {
    return this.http.get<PriceDTO>(`api/price)
      .pipe(
        tap((data: PriceDTO) => console.log('PRICE: ', data)),
        catchError((val: Error) => of(`I caught: ${val}`))
      );
  }