Typescript error: The 'this' context of type '.....' is not assignable to method's 'this' type

orgChangedSuccess$: Observable<Action> = this.actions$
    .ofType(orgActions.UPDATE_ORG_SUCCESS)
    .map(toPayload)
    .switchMap((org) => {
        return Observable.combineLatest(
            this.dataChallenge.challengeList$.filter((val) => val !== null),
            this.dataMetric.metrics$.filter((val) => val !== null),
        )
    })
    .switchMap((data) => <Observable<dataActions.Actions>>Observable.of(new dataActions.DataRetrieved()))

I got this kind of typescript error. It looks like it's due to passing a non-async function to a method that expected an async function. How can I resolve this error and are there any VS Studio Code extensions that can help fix these types of errors quickly?

This is an old ionic/Angular app that hasn't been worked on in years. It took some time to get past all the deprecation/ versioning issues, now I am unable to build due to these types of typescript errors having to due with expecting async/non-async types.

The filter is a javascript array method, which is set on an observable which might be the problem, instead use the rxjs operator filter, to filter out the observable emissions. We use .pipe(...) and we can pass the rxjs operators inside this pipe.

orgChangedSuccess$: Observable<Action> = this.actions$
    .ofType(orgActions.UPDATE_ORG_SUCCESS)
    .map(toPayload)
    .switchMap((org) => {
        return Observable.combineLatest(
            this.dataChallenge.challengeList$.pipe(filter((val) => val !== null)),
            this.dataMetric.metrics$.pipe(filter((val) => val !== null),
        ))
    })
    .switchMap((data) => <Observable<dataActions.Actions>>Observable.of(new dataActions.DataRetrieved()))