Building a Typescript type using Javascript variables for the key names

Building a Typescript type using Javascript variables for the key names

When working with TypeScript, you may come across a situation where you need to dynamically build a type using JavaScript variables for the key names. In this blog post, we will explore different solutions to this problem.

Solution 1: Using an interface

One way to achieve this is by using an interface. You can define an interface with dynamic key names and use it to create a type.

interface DynamicType {
    [key: string]: string;
}

const dynamicObject: DynamicType = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
};

type DynamicTypeKeys = keyof DynamicType;

In this example, we define an interface called `DynamicType` with a dynamic key name using `[key: string]: string;`. We then create an object `dynamicObject` with the desired key-value pairs. Finally, we use `keyof DynamicType` to create a type `DynamicTypeKeys` that represents the keys of the `DynamicType` interface.

Solution 2: Using a mapped type

Another approach is to use a mapped type. You can define a mapped type with dynamic key names and use it to create a type.

type DynamicType = {
    [key in string]: string;
};

const dynamicObject: DynamicType = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
};

type DynamicTypeKeys = keyof DynamicType;

In this example, we define a mapped type called `DynamicType` with a dynamic key name using `[key in string]: string;`. We then create an object `dynamicObject` with the desired key-value pairs. Finally, we use `keyof DynamicType` to create a type `DynamicTypeKeys` that represents the keys of the `DynamicType` mapped type.

Conclusion

Building a TypeScript type using JavaScript variables for the key names can be achieved using interfaces or mapped types. Both solutions allow you to dynamically define the key names of a type based on JavaScript variables. Choose the solution that best fits your specific use case.