How to Add a property to an Object in TypeScript

Add a property to an Object in TypeScript #

To add a property to an object in TypeScript, set the property as optional on the interface you assign to the object using a question mark. You can then add the property at a later point in time without getting a type error.

index.ts

Copied!
// ✅ Add specific property to object
interface Person {
  name: string;
  age?: number; // 👈️ mark as optional so you can add later
}
const obj1: Person = {
  name: 'Tom',
};

obj1.age = 30;

// ✅ Add any property to object
const obj2: Record<string, any> = {};

// 👇️ can now add any property to the object
obj2.name = 'Tom';
obj2.age = 30;

// ✅ Add any property, but type key-value
// pairs you know in advance
interface Animal extends Record<string, any> {
  name: string;
  age: number;
}

const obj3: Animal = { name: 'Alfred', age: 3 };

// 👇️ Can now add any property, but name and age are typed
obj3.type = 'Dog';

The first example shows how to set the age property on the Person interface to optional.

The age property can either be undefined or a number. This approach is used when you know the name of the property and the type of its value ahead of time as it keeps things type safe.

Now you can initialize the object without the property and set it later on.

index.ts

Copied!
interface Person {
  name: string;
  age?: number; // 👈️ mark as optional so you can add later
}
const obj1: Person = {
  name: 'Tom',
};

obj1.age = 30;

// ⛔️ Error: Type '"hello"' is not assignable
// to type 'number | undefined'.
obj1.age = 'hello';

If you try to assign a non-number value to the age property, you'd get an error.

The second example uses the Record utility type - Record<string, any>.

index.ts

Copied!
// ✅ Add any property to object
const obj2: Record<string, any> = {};

// 👇️ can now add any property to the object
obj2.name = 'Tom';
obj2.age = 30;

The Record utility type allows us to enforce the type of an object's values in TypeScript, e.g. type Animal = Record<string, string>.

The Record utility type constructs an object type, whose keys and values are of the specified type.

We used a type of any for the values and a type of string for the keys in the object.

This is very broad and allows us to add any property of any type to the object.

It's best to be as specific as possible when typing an object in TypeScript. We should try to leverage the language as much as possible.

The third example shows how to specify the properties and the types in an object that we know about and use the Record utility type to allow the user to add other properties.

index.ts

Copied!
// ✅ Add any property, but type key-value
// pairs you know in advance
interface Animal extends Record<string, any> {
  name: string;
  age: number;
}

const obj3: Animal = { name: 'Alfred', age: 3 };

// 👇️ Can now add any property, but name and age are typed
obj3.type = 'Dog';

The interface we created requires the name and age properties but also extends a type that allows any string properties with values of any type.

This is better than just using the Record utility type with string keys and any values because we get type safety when it comes to the properties we explicitly specified.

index.ts

Copied!
interface Animal extends Record<string, any> {
  name: string;
  age: number;
}

const obj3: Animal = { name: 'Alfred', age: 3 };

// ⛔️ Error: Type 'number' is not
// assignable to type 'string'.
obj3.name = 5;

Setting a property to the incorrect type causes an error because we've already declared the name property to be of type string in the Animal interface.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Add a property to an Object in TypeScript

Add a property to an Object in TypeScript #

Borislav Hadzhiev