How to Dynamically Assign Properties to an Object in TypeScript

by

Here are seven ways to dynamically assign properties to an object in TypeScript:

  1. Explicitly type the Object at declaration time
  2. Using the index notation
  3. Use the Record utility type
  4. Use the Map data type
  5. Consider an optional object property
  6. 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

Consider an optional object property

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!

Leave a Comment