There seems to be an issue with the behavior of setters and getters that are setting or returning another public property on the object in TypeScript when retrieved using Angular's (v5) HttpClient.
Here is the code snippet:
export interface NamedEntity {
id: number;
name: string;
priority?: number;
}
export Rule implements NamedEntity {
ruleId: number;
ruleName: string;
get id(): number {
return this.ruleId;
}
set id(id: number){
this.ruleId = id;
}
get name(): string {
return this.ruleName;
}
set name(name: string){
this.ruleName = name;
}
}
//Another class that implements NamedEntity similarly
I am fetching Rule objects through HttpClient:
return http.get<Rule[]>("my url");
Upon subscribing to the Observable<Rule>, it appears that properties not using getters/setters display correctly both in the debugger and within angular templates. However, the getter/setter based properties show as undefined in the debugger and blank in the angular template.
My Angular project was created with Angular-CLI and my tsconfig.json has "es5" set as the target.
This issue likely arises from how HttpClient converts the data into the shape defined by the generated Rule interface in TypeScript. How can I ensure that the resulting objects from the HttpClient call are instances of the actual Rule class instead of just its implicit interface?