Here are seven ways to dynamically assign properties to an object in TypeScript:
- Explicitly type the Object at declaration time
- Using the index notation
- Use the Record utility type
- Use the Map data type
- Consider an optional object property
- Using Object.assign() method
Method 1: Explicitly type the Object at declaration time
You can define the Object’s type when you declare it, specifying the keys and their types. This is the most basic approach and provides the least flexibility for dynamic properties.
type Person = {
name: string;
age: number;
};
const person: Person = {
name: 'Krunal',
age: 25,
};
Output
{ name: 'Krunal', age: 25 }
Method 2: Using the index notation
In this approach, you create an object with an index signature, allowing it to have any property with a string key and value. Then, you use index notation to assign a value to a property with a dynamic name.
You can use square brackets([ ]) to access and set a property on the Object using a variable as the property name. This is a simple way to assign properties dynamically to an object.
const obj: { [key: string]: any } = {};
const propertyName = "dynamicProperty";
const propertyValue = "Hello, TypeScript!";
obj[propertyName] = propertyValue;
console.log(obj);
Output
{ dynamicProperty: 'Hello, TypeScript!' }
Method 3: Use the Record utility type
The Record utility type is “used to create an object type where the keys are of a certain type, and the values are of another type.”
type ValidKeys = 'property1' | 'property2' | 'property3';
const obj: Record<ValidKeys, string> = {
property1: 'value1',
property2: 'value2',
property3: 'value3',
};
console.log(obj);
Output
{ property1: 'value1', property2: 'value2', property3: 'value3' }
Method 4: Using the Map data type
Instead of using a regular object, you can use the Map data type, which allows for more dynamic key-value pairings.
const map = new Map<string, any>();
map.set('property1', 'value1');
map.set('property2', 42);
console.log(map)
Output
Map(2) { 'property1' => 'value1', 'property2' => 42 }
Method 5: Consider an optional object property
Sometimes, you might not be sure if an object will have a particular property. You can make that property optional using the “?” syntax.
type MaybePerson = {
name: string;
age?: number;
};
const person1: MaybePerson = {
name: 'Krunal',
};
const person2: MaybePerson = {
name: 'Ankit',
age: 30,
};
console.log(person1)
console.log(person2)
Output
Method 6: Using the Object.assign() function
The Object.assign() function creates a new object by merging two other objects. The first Object is typically empty, while the second contains the dynamic property name and its associated value.
By using computed property names (enclosed in square brackets([ ])) in the second Object, you can dynamically assign the property name.
const propertyName = "dynamicProperty";
const propertyValue = "Yello, Homer!";
const obj = Object.assign({}, { [propertyName]: propertyValue });
console.log(obj);
Output
{ dynamicProperty: 'Yello, Homer!' }
That’s it!

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.