So I make a call to the api and return data form it. It contains way more data than I need, so I map trough my response and return only values that I need. The problem is that I do not understand how to define my response data in TS. Now it looks like this but I know that using any is a bad option .
data = data.results.map((item: any) => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})
How should I transform response data to format that I need using TS. I think I need some additional step so I could use my interface on item.
interface PhotoModel {
id: string
src: string
description: string
name: string
favorited: boolean
}
You need to create some interface or type that will describe the data you're going to process. For example:
interface ResultItem {
id: string;
urls: {
small: string;
};
alt_description: string;
user: {
name: string;
};
}
interface PhotoModel {
id: string
src: string
description: string
name: string
favorited: boolean
}
data.results.map((item: ResultItem): PhotoModel => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})
However (especially if you don't control the shape of the API you're requesting), in runtime you might not get what you expect to get. So it would be beneficial to validate the data returned from the API first (for example, using some tool like io-ts or a similar one).
You can just return data.results as PhotoModel array
return data.results as PhotoModel[]
The best way would be to just cast the return to your desired type. Typescript will not let you use any of the extra fields: and you can get away without any processing:
const data: PhotoModel[] = data.results;
If you really want to mutate your data for some reason and this is insufficient, you can do this:
data = data.results.map((item: any): PhotoModel => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})
Using any
is not bad here as even if you define an interface, it has no value.
let photos: PhotoModel[] = data.results.map((item: any) => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.