How to use TypeScript types on API response data

Question

So I make a call to the api and return data from it. It contains way more data than I need, so I map trough my response and return only the 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
}

it's a bad practice to use external input without validation. check ajv, it supports typescript. — marzelin
– marzelin, Commented Jan 20, 2021 at 18:29

falinsky · Accepted Answer · 2021-01-20 18:40:13Z

7

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

answered Jan 20, 2021 at 18:40

falinsky

7,4454 gold badges34 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CognitiveDesire · Accepted Answer · 2021-01-20 18:19:44Z

0

You can just return data.results as PhotoModel array

return data.results as PhotoModel[]

answered Jan 20, 2021 at 18:19

CognitiveDesire

7845 silver badges20 bronze badges

Comments

Wakeel · Accepted Answer · 2021-01-20 18:32:01Z

0

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

answered Jan 20, 2021 at 18:32

Wakeel

5,2602 gold badges16 silver badges14 bronze badges

Comments

Softwared · Accepted Answer · 2021-01-20 18:27:01Z

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.

Collectives™ on Stack Overflow

How to use TypeScript types on API response data

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related