Argument of type 'unknown[]' is not assignable to parameter of type > 'OperatorFunction

Question

component.ts

initialize() method says

Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' provides no match for the signature '(source: Observable<unknown[]>): Observable'

alertsChanged$: Observable<AlertModel[]>;

private initialize(): void {
  

    this.alertsChanged$ = this.alertsService.getAlerts().pipe(
      map((res) => res), // here it returns the above error
      tap((res) => {
        
        this.setDataForFilters(res); //Argument of type 'unknown' is not assignable to parameter of type 'AlertModel[]'.  
       
      }),          
    );
  }

 private setDataForFilters(alerts: AlertModel[]): void {}

service.ts

 // no issues here

 getAlerts(): Observable<AlertModel[]> {
      return this.angularFireDatabase
      .list<AlertModel>(`groups/${this.groupId}/alerts`)
      .valueChanges()
      .pipe(
        map((res) => orderBy(res, ['timeStamp'], ['desc'])),
        first()
      );
  }

.html

 <app-alerts
    [alerts]="alertsChanged$ | async"
  ></app-alerts>

Please let me the issue here?

Answer 1

I found the issue here. It was a conflict with the Lodash map and RxJS map . ie VS code didn't import the RxJS map due to the Lodash map and it gave the above error due to that.

Since I need to use both on the same component I have done it like so.

import { finalize, tap, map } from 'rxjs/operators';

import { map as lodashMap } from 'lodash';

Answer 2

The same kind of error will come if we use the imports from 'rxjs' and "rxjs/operators" at the same time. In my case this was the code,

  this.anApiCall.getAdata(this.id)
  .pipe(map(res => this.dataUtil.parseToForm(this.id, res)),
    onErrorResumeNext(of(this.dataUtil.newForm(this.id))))
  .pipe(tap(frm => this.form = frm))
  .subscribe();     

I was using 'onErrorResumeNext' operator but unfortunately, IDE imported the function from 'rxjs' instead of rxjs/operators.

 import { onErrorResumeNext } from "rxjs"; // if the import is like this then you will get error like 'Argument of type 'Observable<YourType>' is not assignable to parameter of type 'OperatorFunction<unknown, unknown>'.'

So check the import is from 'rxjs/operators' or not. and change the import as

import { map, tap, onErrorResumeNext  } from "rxjs/operators";