How to assign dynamic properties to an object in typescript

Dynamic properties in typescript and javascript

In javascript, you can create an object using object syntax.

var employee = {};

And assign the properties dynamically

employee.name= "john";

You can access the dynamic properties

console.log(employee.name) // john

If you use the save above code in Typescript.

var employee = {};
employee.name= "john";


It gives a below error

Property 'name' does not exist on type '{}'.

In typescript, a variable declared is typed, which means declared variable should have a type and causes an error at compile time.

It provides type safety at compile time to avoid an error.

In that case, How do you add dynamic properties to an object?

How to add dynamic properties to an object in typescript

There are multiple ways we can do

-using any type

In this, Declare an object of type any which accepts any type of data.

var employee: any= {};
employee.name= "john";


You have to write a code to convert from any to desired and add extra time to do it. This is not followed type safety and defeats the purpose of doing in typescript.

  • Using interface index type signature

Index type signature allows you to store key values and values with the declared type.

interface Employee {
    [key: string]: any

Above, the interface is declared with string keys and value types any.

Create an object of the interface as follows

  var obj: Employee = {};

You can assign only string keys with any value

console.log(obj) //{ "name": "ram",  "salary": 5000}

You can inline index signature with short syntax

var obj: {[k: string]: any} = {};
console.log(obj) //{ "name": "ram",  "salary": 5000}

-using Record Type

Typescript introduced Record<K, V> is an object with key types are K and value types, T.

this object can store string key and value any type

var emp1: Record<string,any> = {}
  • extend Interface

This is a cleaner way of doing type safety and object inheritance. Creates a base interface that has common properties

interface BaseObject{
id: string,
name: string,

You can create a new interface by extending the base interface with additional required properties

interface Employee extends BaseObject {
   salary: string;

Create an object of the interface which you can add properties

var emp1: Employee= {};
emp1.name= "john";

This gives a cleaner and reusable approach for users to extend object behavior.


To sum up, You learned multiple ways to add dynamic properties to an object in typescript with examples.

  • any type
  • index type
  • record type
  • extend interface

I prefer to extend it as a reusable and cleaner object in terms of reuse and type safety.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.