Type 'Observable<void | PostProps[]>' is not assignable to type 'Observable<PostProps[]>'

Issue

I am getting an error as :

Type 'Observable<void | PostProps[]>' is not assignable to type 'Observable<PostProps[]>'. Type 'void | PostProps[]' is not assignable to type 'PostProps[]'. Type 'void' is not assignable to type 'PostProps[]'.ts(2322)

but I am returning the response. but how map not understand?

here is the error part:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError, map, shareReplay } from 'rxjs/operators';

export interface PostProps {
    userId: number;
    id: number;
    title: string;
    body: string;
    processed: string;
}

@Injectable()
export class PersonnelDataService {
    list$: Observable<PostProps[]>;

    private URL = 'https://jsonplaceholder.typicode.com/posts';

    constructor(private http: HttpClient) {}

    fetchPersonnelList() {
        if (!this.list$) {
            this.list$ = this.http.get<PostProps[]>(this.URL).pipe( //error
                map((response: PostProps[]) => response),
                shareReplay(1),
                catchError(async (error) => this.handleError(error))
            );
        }
        return this.list$;
    }

    handleError(error) {
        throwError(error);
    }
}

Solution

You get a void type because catchError does not return anything. So return an empty array in catchError state.

 catchError((error) => {
      this.handleError(error);
      return [];
  })

Answered By - Sachila Ranawaka