Typescript Dynamic keys in Interface

Question

I have an API I'm working with that allows you to search for different games by platform. I'm trying to map out the appropriate interfaces for them, but the top level object key changes with each search type.

The response from the HTTP request gives me back...

ps4: {
  data: [{
    ...
  }]

OR...

xbox: {
  data: [{
    ...
  }]

OR...

switch: {
  data: [{
    ...
  }]

As you can see, the top level object changes with each type of HTTP request, but the data itself remains the same. How do you map out an interface for that key to change dynamically? Thank you.

Does this answer your question? [How to declare a typed object with arbitrary keys?](https://stackoverflow.com/questions/36590284/how-to-declare-a-typed-object-with-arbitrary-keys) — Heretic Monkey, Sep 20 '22 at 18:48

fortunee · Accepted Answer · 2021-10-16T20:16:27.033

3

You can define an interface for it like this:

interface Response {
  [key: string]: {
    data: Object[]
  }
}

OR to be more explicit you can define a type with all the possible keys

type TKeys 'ps4' |'xbox' | 'switch';

type Response = {
  [key in TKeys]: {
    data: Object[]
  }
}

You can also consider using an enum type like this

enum Platforms {
 ps4 = 'ps4',
 xbox = 'xbox',
 switch = 'switch'
}

type Response = {
  [key in Platforms]: {
    data: Object[];
  };
};

edited Oct 16 '21 at 20:16

answered Oct 16 '21 at 19:28

fortunee

3,852
2
17
29

Your second suggestion is not valid TypeScript. – jcalz Oct 16 '21 at 19:37
Yes, I just updated it. I was copy/pasting @jcalz – fortunee Oct 16 '21 at 19:38
So you’re suggesting that it should require all 3 keys? – jcalz Oct 16 '21 at 19:45
@jcalz Yes, and he could specify more platforms, so the type is more explicit as opposed to just using string. – fortunee Oct 16 '21 at 19:49
It doesn't seem to like that. I'm getting an error for "An index signature parameter type cannot be a union type consider using a mapped object type instead" – ACDev Oct 16 '21 at 20:09
Is this for the second options @ACDev – fortunee Oct 16 '21 at 20:13
Consider using an enum type. See my updated answer on how to do that @ACDev – fortunee Oct 16 '21 at 20:17
1

Cool! Go ahead and accept the answer as well @ACDev – fortunee Oct 16 '21 at 20:23

score 2 · Answer 2 · answered Oct 16 '21 at 19:57

2

Something like this would work:

interface Data {
    data: object[];
}

interface Response {
    [x: string]: Data
}

Note that I've used object intentionally instead of Object as it suits your case better. More on it here

answered Oct 16 '21 at 19:57

Shravan Dhar

1,455
10
18

Lmaoo, you literally just copied the first suggestion in my answer and modified it, by creating a second interface. – fortunee Oct 16 '21 at 20:00
1

Did not see your answer while I was writing mine. My apologies if it appears that way. @fortunee I'd have commented otherwise – Shravan Dhar Oct 16 '21 at 20:03
Sorry dude, I believe you and I didn't mean to sound like you actually copied me. – fortunee Oct 16 '21 at 20:06
No worries. In the friendly spirit, I'll upvote your answer. Cheers mate !! @fortunee – Shravan Dhar Oct 16 '21 at 20:08
1

Yours too my friend! – fortunee Oct 16 '21 at 20:12

Typescript Dynamic keys in Interface

2 Answers2

Linked