Currently, I am in the process of developing an Angular application using TypeScript. As part of this project, I have defined several classes along with corresponding interfaces that align perfectly with their respective properties:
Map:
export class Map extends BaseObject implements IMap {
Dimensions: Dimension[];
Shapes: Shape[];
Roles: Role[];
}
BaseObject:
export class BaseObject implements IBaseObject {
ID: string;
Label: string;
DataType: string;
CreatedDate: Date;
CreatedUser: string;
UpdatedDate: Date;
UpdatedUser: string;
}
Within my codebase, there is a service method where the mapArray() function generates an array of Map objects (explicitly declared as Map[]):
Service Method Example:
getMap(id: string): Observable<Map> {
return of(mapArray().find(map => map.ID === id));
}
The structure of this method closely resembles an example in an Angular tutorial:
Angular Tutorial - Service Method:
getHero(id: number): Observable<Hero> {
this.messageService.add(`HeroService: fetched hero id=${id}`);
return of(HEROES.find(hero => hero.id === id));
}
However, I am encountering an error on the return line of my service method:
Type 'Observable<Map | undefined>' is not assignable to type 'Observable<Map>'.
Upon comparison with the tutorial code, it appears that while the .find() method in my implementation returns a type Map | undefined, the tutorial's method returns a type Hero.
What could be causing this discrepancy in behavior?