Typescript force object keys from object values

Question

I want to create a type where the object keys are the value from object values.

Example:

type AreaChartData = {
  xAxis: string;
  yAxis: string;
  data: {
    [Key in AreaChartData['xAxis'] | AreaChartData['yAxis']]: string | number;
  }[];
};

In my example i want xAxis and yAxis as strings. But in the "data" attribute the values from xAxis and yAxis should be used as string literals so that i can force the user to have at least two keys with the names of the values.

Right now one way it works is to define two generics and use them later. But i hope that i can dynamically can convert the values to a type.

I'm using the newest typescript version.

You need a generic type parameter here

k.tten
– k.tten

2023-01-24 21:38:41 +00:00
Commented Jan 24, 2023 at 21:38 — k.tten
– k.tten, Commented Jan 24, 2023 at 21:38

Romain TAILLANDIER · Accepted Answer · 2023-01-25 10:19:36Z

1

You will never be able to convert a value to a type.

Types only exists at compile time.

Value only exists at run time.

The type you created in this question is equivalent to :

type AreaChartData = {
  xAxis: string;
  yAxis: string;
  data: {
    [ key:string]: string | number;
  }[];
};

Here is a proposal :

type AreaChartData2<xAxis extends string='x',yAxis extends string ='y'> = {
  xAxis: xAxis;
  yAxis: yAxis;
  data: {
    [key in xAxis|yAxis]: string | number;
  }[];
};

const a : AreaChartData2 <'lat','long'> = {
    xAxis:'lat',
    yAxis:'long',
    data:[{
        lat:"plouf",
        long:23
    }]
}

answered Jan 25, 2023 at 10:19

Romain TAILLANDIER

2,02515 silver badges22 bronze badges

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

1 Comment

David Alvarez Over a year ago

I would replace {[key in xAxis|yAxis]: string | number;} by Record<xAxis|yAxis, string | number>

Collectives™ on Stack Overflow

Typescript force object keys from object values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related