How to declare type/interface with dynamic props

Question

I'm trying to type an interface (or type) with the following logic:

interface MyArgs<Name, Id> {
  items: {
    [Name]: string,
    [Id]: string
  }[];
  idKey: string;
  nameKey: string;
}

In more detail:

I'm getting an array of items of an unknown type/interface (it's dynamic, they can be anything). While I could just type them as any[], I'd like to know if it's possible to be a bit more specific about their type, and pass Typescript the information that I do have:

each item will be having an id property (e.g: guid, id, uuid) and a name property (e.g: name, label, title). The exact idKey and nameKey are provided as arguments (idKey, nameKey).

I want to declare the values provided in idKey and nameKey as valid keys for items records (e.g: { [idKey]: string; [nameKey]: string }(

What I tried above doesn't work. I also tried this:

interface MyArgs<Name, Id> {
  items: { <Name>: string; <Id> : string }[]
  idKey: string
  nameKey: string
}

which is, too, invalid.

How can I achieve this?

Note: if the above would be possible without having to type the values twice (once inside <> and once in the values of idKey and nameKey, that would be even more awesome).

If the keys are as you said - dynamic, then how do you expect Typescript to know them during compile time? — user13258211
– user13258211, Commented Oct 6, 2022 at 13:28
@Mke, I want typescript to treat them as variables. It shouldn't care about their actual value, but it should know that item[idKey] is a string and so is item[nameKey], without me having to declare as string. — tao
– tao, Commented Oct 6, 2022 at 13:29
@caTS, probably, although I don't fully understand it, I'll play with it. Thanks! — tao
– tao, Commented Oct 6, 2022 at 13:32
@caTS, It's clear to me that infer is the right way to do it, but the implementation details for my specific case elude me (I keep getting errors). I'd appreciate an answer if you happen to know how to do it. Thanks! — tao
– tao, Commented Oct 6, 2022 at 14:26

k.tten · Accepted Answer · 2022-10-06 15:28:04Z

1

Intersect mapped types (or rather, Records) to create the correct object type:

interface MyArgs<Name extends string, Id extends string> {
  items: (
    { [_ in Name]: string; } &
    { [_ in Id]: string; }
  )[];
  idKey: string;
  nameKey: string;
}

If you need to, you can also constrain Name and Id to more specific keys:

interface MyArgs<Name extends "name" | "label" | "title", Id extends "guid" | "id" | "uuid"> {

You could also use Records to simplify it further:

  items: (
    Record<Name, string> & Record<Id, string>
  )[];

Or even just:

  items: Record<Id | Name, string>[];

edited Oct 6, 2022 at 15:28

answered Oct 6, 2022 at 14:34

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

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

8 Comments

tao Over a year ago

With both syntaxes above I'm getting this error. I'm using "typescript": "~4.4.0" (installed: 4.4.4). Do I need a higher version?

k.tten Over a year ago

Ah no, you just need to add a generic constraint. Probably Name extends string and Id extends string.

tao Over a year ago

Awesome, works like a charm. But I don't really understand how I could have reached this result using the question you pinpointed as similar.

k.tten Over a year ago

I used mapped types to create dynamically named keys. The focus in the linked question was this and not the usage of infer. Sorry if it was a little misleading :)

k.tten Over a year ago

Sure, I did not realize I could do Record<Id | Name, string> :)

|

Collectives™ on Stack Overflow

How to declare type/interface with dynamic props

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related