After diving into rxjs and Angular recently, I attempted to create an API for accessing a web service.
I started by defining the following type:
export type Banner = {
targetId: number;
url: string;
imageUrl: string;
}
The service component looks like this:
export class HomeService {
constructor(private http: HttpClient,
@Inject(API_CONFIG) private uri: string) { }
getBanners(): Observable<Banner[]> {
return this.http.get(this.uri + 'banner')
.pipe(map((res: { banners: Banner[] }) => res.banners));
}
}
And here is an example of how the data is received:
{
"banners": [
{
"imageUrl": "http://p1.music.126.net/64Nc0mcg6Sjq56TzCLDpQA==/109951167536067432.jpg",
"targetId": 0,
...
...
]
Upon compiling the code, I encountered the following error message:
Error: src/app/service/home.service.ts:18:13 - error TS2345: Argument of type 'OperatorFunction<{ banners: Banner[]; }, Banner[]>' is not assignable to parameter of type 'OperatorFunction<Object, Banner[]>'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'banners' is missing in type 'Object' but required in type '{ banners: Banner[]; }'.
Versions used: Typescript 4.5.2, Angular 13.1.0