javascript - Typescript: how to define a object with many unknown keys - Stack Overflow

admin管理员组

文章数量:1310273

I'm building an application that access an API that returns an object with many unknown keys, each key represents an id of a user.

Example:

const response = {
  "random id1": {name: "user1"},
  "random id2": {name: "user2"},
  ...
  "random id100": {name: "user100"}
}

I know that if I have just one unknown key I can define using something like:

type MyDefinition = {
  [key: string]: Metadata
}

But how can I define an object with so many different keys?

I'm building an application that access an API that returns an object with many unknown keys, each key represents an id of a user.

Example:

const response = {
  "random id1": {name: "user1"},
  "random id2": {name: "user2"},
  ...
  "random id100": {name: "user100"}
}

I know that if I have just one unknown key I can define using something like:

type MyDefinition = {
  [key: string]: Metadata
}

But how can I define an object with so many different keys?

• javascript
• typescript

Share Improve this question Follow asked Oct 23, 2021 at 20:31 Felipe CésarFelipe César 1,44422 gold badges2222 silver badges3636 bronze badges 4

• 3 [key: string] allows for multiple unknown keys though, as long as they're all strings – Samathingamajig Commented Oct 23, 2021 at 20:34
• 2 What limits the latter to "one key"? You could also use type MyDefinition = { [key: `random id${number}`]: MetaData; }, but that's just if you want it more precise (and it would still not match perfectly, as it allows generic numbers, e.g. "random id1e4"). – ASDFGerte Commented Oct 23, 2021 at 20:34
• The answers you're getting here seem like they specifically are dealing with keys literally of the form "random id123" but I assume that the actual random ids you're talking about don't have any such constraint on them. In which case you should just use an index signature as @Samathingamajig has suggested (and should probably post as an answer). Index signatures do not restrict to a single key and I'm not sure what gave you that idea; is that something you ran into somewhere? – jcalz Commented Oct 24, 2021 at 1:20
• @Samathingamajig you solved my problem. I didn't know this allows multiple keys. If you post an answer I would be happy to accept it :) – Felipe César Commented Oct 26, 2021 at 15:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

[key: string] allows for any amount of unique strings as keys.

type Metadata = {
  name: string
}

type MyDefinition = {
  [key: string]: Metadata
}

const response: MyDefinition = {
  "random id1": {name: "user1"},
  "random id2": {name: "user2"},
  // ...
  "random id100": {name: "user100"},
};

Try it on TypeScript Playground

Extending @ASDFGerte ment. You can generate a range of numbers from 0 to 998 in typescript 4.5:

type MAXIMUM_ALLOWED_BOUNDARY = 999

type ComputeRange<
  N extends number,
  Result extends Array<unknown> = [],
  > =
  (Result['length'] extends N
    ? Result
    : ComputeRange<N, [...Result, Result['length']]>
  )

// 0 , 1, 2 ... 998
type NumberRange = ComputeRange<MAXIMUM_ALLOWED_BOUNDARY>[number]

type Name<T extends string> = { name: T }

type CustomResponse = {
  [Prop in NumberRange]: Record<`random id${Prop}`, Name<`id${Prop}`>>
}

Playground

Here and here you can find an explanation of number range.

You have probable noticed that there is a limit you can't cross.

With above approach it will not allow random id1e4.

You can use a type defined with a template string like this:

const response: { [key: `random id${number}`]: { name: string }} = {
  "random id1": {name: "user1"},
  "random id2": {name: "user2"},
  "random id100": {name: "user100"}
}

You can see it in action on this TypeScript playground.

本文标签： javascriptTypescript how to define a object with many unknown keysStack Overflow