Agular 11 error TS2322: Type 'Observable<>

Question

I am new to the Angular world I am facing this error and I do not understand how to fix it

[0] Error: src/app/components/sites-escalade/sites-escalade.component.ts:23:5 - error TS2322: Type 'Observable<AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }>' is not
 assignable to type 'Observable<AppDataState<SiteEscalade[]>>'.
[0]   Type 'AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }' is not assignable to type 'AppDataState<SiteEscalade[]>'.
[0]     Type '{ dataState: DataStateEnum; }' has no properties in common with type 'AppDataState<SiteEscalade[]>'.

here is my code "enum and interface":

and here is my ts class :

import { Component, OnInit } from '@angular/core';
import {SitesEscaladeService} from '../../services/sites-escalade.service';
import {SiteEscalade} from '../../model/site-escalade.model';
import {Observable, of} from 'rxjs';
import {catchError, map, startWith} from 'rxjs/operators';
import {AppDataState, DataStateEnum} from '../../state/site-escalade.state';

@Component({
  selector: 'app-sites-escalade',
  templateUrl: './sites-escalade.component.html',
  styleUrls: ['./sites-escalade.component.css']
})
export class SitesEscaladeComponent implements OnInit {

  sitesEscalade$:Observable<AppDataState<SiteEscalade[]>> |null=null;

  constructor(private sitesEscaladeService:SitesEscaladeService) { }

  ngOnInit(): void {
  }

  onGetAllSitesEscalade() {
    this.sitesEscalade$=
      this.sitesEscaladeService.getAllSitesEscalade().
      pipe(
        map((data)=>({dataState:DataStateEnum.LOADED, data:data})),
      startWith({dataState:DataStateEnum.LOADING}),
      catchError(err=>of({dataState:DataStateEnum.ERROR, errorMessage:err.message}))
    );
  }

}

thanx for your help

Answer 1

Look at the error message closely:

Type 'Observable<AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }>' is not
 assignable to type 'Observable<AppDataState<SiteEscalade[]>>'

So your onGetAllSitesEscalade() method is trying to assign something to this.sitesEscalade$ (Observable<AppDataState<SiteEscalade[]>>) which is not just an observable of the type AppDataState<SiteEscalade[]>.

map((data)=>({dataState:DataStateEnum.LOADED, data:data}))

will return an untyped object, not an AppDataState. Same for

catchError(err=>of({dataState:DataStateEnum.ERROR, errorMessage:err.message}))

The ugly fix is to cast everything to as AppDataState<SiteEscalade[]>.

https://stackblitz.com/edit/angular-ivy-islg9b

A nicer approach would be to define a class implementing AppDataState (or why not define AppDataState as class instead of interface?)