How to Create Objects with Dynamic Keys in TypeScript ?
In TypeScript, objects with dynamic keys are those where the key names are not fixed and can be dynamically determined at runtime. This allows the creation of flexible data structures where properties can be added or accessed using variables, providing more versatile type definitions.
These are the following approaches:
Table of Content
Create Objects with Dynamic Keys Using Index Signature
In this approach, we are using an index signature with the interface dict to create an object where keys are dynamically typed strings, allowing for properties like 'title,' 'category,' 'likes,' and 'foundedYear' with values of either strings or numbers.
Syntax:
{
[keyType: KeyType]: ValueType;
}
Example: The below example uses Index Signature to Create Objects with Dynamic Keys in TypeScript.
interface dict {
[key: string]: string | number;
}
const obj: dict = {
title: 'GeeksforGeeks',
category: 'Computer Science',
likes: 10000,
foundedYear: 2008,
};
console.log(obj);
Output:
{
"title": "GeeksforGeeks",
"category": "Computer Science",
"likes": 10000,
"foundedYear": 2008
}
Create Objects with Dynamic Keys Using Record Type
In this approach, we are using the Record type with a dynamic string key type (keys) to create an object (obj) where keys can be any string, providing flexibility for properties like 'title,' 'category,' 'likes,' 'foundedYear,' and 'founder' with values of either strings or numbers.
Syntax:
Record<Keys, Type>
Example: The below example uses Record Type to Create Objects with Dynamic Keys in TypeScript.
type keys = string;
const obj: Record<keys, string | number> = {
title: 'GeeksforGeeks',
category: 'Computer Science',
likes: 10000,
foundedYear: 2008,
founder: "Sandeep Jain",
};
console.log(obj);
Output:
{
"title": "GeeksforGeeks",
"category": "Computer Science",
"likes": 10000,
"foundedYear": 2008,
"founder": "Sandeep Jain"
}
Create Objects with Dynamic Keys Using Mapped Types
Mapped types in TypeScript allow us to create new types by transforming the properties of an existing type. We can leverage mapped types to dynamically generate object types with specific keys and value types.
Syntax:
type DynamicObject<KeyType extends string | number, ValueType> = {
[K in KeyType]: ValueType;
};
Example: The following example demonstrates how to use a mapped type to create objects with dynamic keys in TypeScript.
type DynamicObject<KeyType extends string | number, ValueType> = {
[K in KeyType]: ValueType;
};
const obj: DynamicObject<"title" | "category" | "likes" | "foundedYear",
string | number> = {
title: 'GeeksforGeeks',
category: 'Computer Science',
likes: 10000,
foundedYear: 2008,
};
console.log(obj);
Output:
{
"title": "GeeksforGeeks",
"category": "Computer Science",
"likes": 10000,
"foundedYear": 2008
}
Each of these methods provides a flexible way to handle objects with dynamic keys in TypeScript, allowing for a variety of use cases depending on your requirements.