Create type keys dynamically in Typescript

Question

I want to generate the type keys from a combination of other type's key, like create dynamically object's keys.

type Swatch = {
  dark: string;
  light: string;
};

type ColorTheme = {
  primary: Swatch;
  secondary: Swatch;
};

// The result should be
type CombineType: {
  // This keys are dinamically created as a combinatino of Swatch and ColorTheme keys

  // primaryDark: string
  // secondaryDark: string
}

Oh this is a nice little template literal type question but I’m on mobile so someone else will almost certainly get here first! If not I’ll answer when I get a chance. — jcalz
– jcalz, Commented Feb 23, 2022 at 21:38

noitse · Accepted Answer · 2022-02-23 21:55:18Z

4

You can achieve this by creating some kind of "generator" generic type that will give you the expected output.

type First = {
  foo: string;
  bar: string;
};

type Second = {
  first: string;
  second: string;
}

type JoinKeys<FK, SK> = 
  FK extends string ?
    SK extends string ?
      `${FK}${Capitalize<SK>}`
    : never
  : never;

type CombineTypes<F,S> = {
  [key in JoinKeys<keyof F,keyof S>]: string;
};

type Test = CombineTypes<First, Second>;

Type JoinKeys simply combines passed in key values. Type CombineTypes is a simple generic type that takes two params and outputs a type, where key is joined by keyof both passed params

You should extend these a bit to make sure only objects can be passed in and to have proper type coverage :)

Here is working example in Typescript Playground

edited Feb 23, 2022 at 21:55

answered Feb 23, 2022 at 21:43

noitse

1,0259 silver badges28 bronze badges

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

2 Comments

Alex Wayne Over a year ago

Don't forget about the Capitalize type :)

noitse Over a year ago

Oh just saw he is expecting camel case, good point :)

Collectives™ on Stack Overflow

Create type keys dynamically in Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related