How do I dynamically assign properties to an object in TypeScript?

In TypeScript, we can not assign the properties dynamically to an object directly by using the dot operator and the square brackets syntax which we generally use to assign dynamic properties in Vanilla JavaScript.

JavaScript is a dynamically typed language and the type of a variable is determined at runtime due to which assigning dynamic properties to JavaScript objects does not give any error. On the other hand, TypeScript is a statically typed language, and the type of variable must be predefined in this. Therefore, if you try to assign dynamic properties to a TypeScript object directly using the dot operator and square bracket syntax will give an error.

Defining an object with empty curly ({}) brackets in TypeScript is not considered as an object, it will be considered as empty braces, and assigning properties to it will throw an error. In this article, we will discuss different methods of dynamically assigning a property to an object in TypeScript.

There are three ways of assigning dynamic properties to objects in TypeScript:

By declaring the object with explicit type

As we know TypeScript is a statically typed language and it expects the explicit type for each variable declared in the code. So, we can declare the object with an explicit type and dynamically assign the properties to an object without any error.

Syntax:

const obj_name: {key_name: prop_type} = {};

Example: This example shows the declaration of an object with explicit type.

Javascript

const obj: { name: string } = {
    name: "GeeksforGeeks"
}
console.log("Before dynamic assignment: ", obj.name)
obj.name = "TypeScript";
console.log("After dynamic assignment: ", obj.name)

Output:

Before dynamic assignment: GeeksforGeeks
After dynamic assignment: TypeScript

By using the index signature of the object

The index signature is also a way of explicitly typing an object but in a different syntax than the simple explicit typing.

Syntax:

const obj_name: { [key_name: key_type]: index_sign_type } = {}

Example:This example shows the way of explicitly typing an object using the object index signature.

Javascript

const obj: { [name: string]: any } = {
    name: "Sachin Tendulkar"
}
console.log("Before dynamic assignment: ", obj.name)
obj.name = "Virat Kohli";
console.log("Before dynamic assignment: ", obj.name)

Output:

Before dynamic assignment: Sachin Tendulkar
After dynamic assignment: Virat Kohli

By using the Record Utility Type

The Record utility type helps us to explicit type the object and its keys and values in a particular syntax.

Syntax:

const obj_name: Record<key_type, value_type> = {}

Example: The below example will help you to understand the practical use of Record utility type to type an object.

Javascript

const obj: Record<any, string> = {
    name: "JavaScript"
}
console.log("Before dynamic assignment: ", obj.name)
obj.name = "TypeScript";
console.log("Before dynamic assignment: ", obj.name)

Output:

Before dynamic assignment: JavaScript
After dynamic assignment: TypeScript