I have a couple of interfaces that define the structure of my data
export interface Site {
id: number;
path: string;
siteLink: string;
features: Feature[];
}
export interface SiteResponse {
data: Site | Site[];
meta?: any;
}
These interfaces are designed to handle either a single object or an array of objects, depending on the API route being called.
Here is a method in my service that I am trying to work with
getSiteById(id: number): Observable<SiteResponse> {
return this.http.get<SiteResponse>(this.API_URL + '/' + id);
}
And here is how I'm subscribing to it
this.ss.getSiteById(this.id).subscribe((x: SiteResponse) => {
const site: Site = x.data;
this.link.setValue(site.siteLink);
this.imagePreview = site.path;
site.features.forEach(feature => {
this.features.push(this.fb.control(feature, Validators.required));
});
this.isPending = false;
});
Although everything seems fine from my end, the validator disagrees and throws an error:
error TS2322: Type 'Site | Site[]' is not assignable to type 'Site'. Type 'Site[]' is not assignable to type 'Site'. Property 'id' is missing in type 'Site[]'.