Add property to existing interface (extend) in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 21, 2022

banner

Photo from Unsplash

Add property to existing interface (extend) in TypeScript #

To add a property to an existing interface:

  1. Use the extends keyword on the interface to copy its members.
  2. Define all of the properties and types on the new interface.
  3. The new interface will contain the defined properties and the properties from the original interface.
index.ts
interface Employee { id: number; name: string; } // ✅ 1. Add properties to interface by extending interface Person extends Employee { salary: number; // 👈️ added property tasks: string[]; // 👈️ added property } const person: Person = { id: 1, name: 'Tom', salary: 100, tasks: ['design', 'dev'], }; // ------------------------------------------------------ // ✅ 2. Use intersection Types type Person2 = Employee & { country: string; }; const person2: Person2 = { id: 2, name: 'Alice', country: 'Germany', };

In the first example, we used the extends keyword to extend from the Employee interface.

This effectively copies the properties from the Employee interface and enables us to add new properties to the newly created interface.

The main benefits of extending an interface are:

  1. Reducing duplication, because we don't have to copy properties between interfaces.
  2. Signaling intent to the reader of our code that there is a relation between the two types.
index.ts
interface Employee { id: number; name: string; } // ✅ 1. Add properties to interface by extending interface Person extends Employee { salary: number; tasks: string[]; } const person: Person = { id: 1, name: 'Tom', salary: 100, tasks: ['design', 'dev'], };

The Person interface doesn't need to repeat the id and name properties and shows to readers of our code that it is somehow related to the Employee type.

You can use this approach to extend from multiple types.

index.ts
interface Employee { id: number; name: string; } interface Developer { language: string; } // 👇️ Extend from both Employee and Developer interface Person extends Employee, Developer { salary: number; tasks: string[]; } const person: Person = { id: 1, name: 'Tom', salary: 100, tasks: ['design', 'dev'], language: 'TypeScript', };

If you need to extend from multiple types, separate their names with a comma.

The Person interface extends from both Employee and Developer, so it has all of the properties from the two types.

Alternatively, you can use intersection types.

index.ts
interface Employee { id: number; name: string; } // 👇️ Using intersection Types type Person2 = Employee & { country: string; }; const person2: Person2 = { id: 2, name: 'Alice', country: 'Germany', };

You will most often see intersection types being used to combine existing types.

index.ts
interface A { a: string; } interface B { b: string; } // type Combined = { // a: string; // b: string; // } type Combined = A & B; const combined: Combined = { a: 'hello', b: 'world', };

You can use intersection types to combine as many types as necessary. The final type has all of the members from all of the specified types.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.