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>'.

Sining

can you show the imports for this code snippet? – Asper

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.

Execution

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)

Loupe

YES! Thanks, this answer saved me. In VSCode I had auto-imported map() from the wrong library without realising it. It's worth checking imports if you're getting type weirdness. – Clorindaclorinde

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}`))
      );
  }

Diaphoretic

Answer 4

I have such issue, first scan wasn't working, so I changed

  .pipe(scan((count ) => count + 1, 0))...

To

  .pipe(scan((count:any ) => count + 1, 0))

Then the problem also was that the Rxjs was installed also at the parent folder of this app. So removing this,I believe have fix the problem.

Using npm-check package is good idea for cleaning problem either global and local level of npm packages.

Timer

Answer 5

I was having this same problem with the code below

mockDetalhes(): Observable<IResponseGenericPage>{
    return of(detalhesMock)
}

The issue was resolved by adding the type inside the of operator, like this:

mockDetalhes(): Observable<IResponseGenericPage>{
    return of(<IResponseGenericPage>detalhesMock)
}

Battista

Answer 6

A simple trick to solve such complicated typing issues is to just cast as any. In my case the error OP mentioned happend in Observable pipeline when using take(1). I just changed

.pipe(take(1))

to

.pipe(take(1) as any)

and the error was gone. Not the best way in a type safe way of thinking but really useful here and in general.

Desperation