Recognizing a common pattern in Angular and TypeScript:
import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'some-selector'
})
class someComponent{
someObject: someClass;
someSum: number;
someError: string;
constructor(private _someService: SomeService)
{}
getSomeObject(): void {
this._someService.getSomeObject().subscribe<someClass>({
next: results => {
this.someObject = results;
this.someSum = this.someObject.sum();
},
error: err => this.someError = err,
complete: () => {}
)
}
}
class SomeService {
constructor(private _http: HttpClient)
{}
getSomeObject(): Observable<someClass> {
return this._http.get<someClass>("");
}
}
class someClass {
prop_1:number;
prop_2:number;
sum():number{
return this.prop_1 + this.prop_2
}
}
Omitting error handling for simplicity. Despite the code seemingly set up to map HTTP responses to specified classes, an error is encountered during debugging with Chrome's F12 inspector:
core.js:4081 ERROR TypeError: _this.someObject.someSum is not a function
The issue arises at "this.someSum = someObject.sum();"
What additional steps are needed for proper deserialization of http.get results to match their specified object type?