How to use TypeScript types on API response data

user_10888607 0
Viewed 7477

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
    }
typescript reactjs javascript
4 Answers

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).

user_6179500

You can just return data.results as PhotoModel array

return data.results as PhotoModel[]
user_14854360 
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
                        }
                    })
user_39947970

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.

user_77440450
Related