How to add types to an interface from multiple interfaces in TypeScript?
Tags: typescript
Published: 2022-01-10 00:00:00

---
  title: How to add types to an interface from multiple interfaces in TypeScript?
  published: true
  tags: TypeScript
  date: Mon Jan 10 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-types-interface-from-multiple-interfaces-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-d05ec362fd1c180ff7b6003cb3ef1c26.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-types-interface-from-multiple-interfaces-typescript)
  
To add types to an interface from multiple interfaces (aka extending the types) in TypeScript, you can use the `extends` keywords after the interface name followed by the names of the interfaces to get the types separated by the comma symbol (`,`).

### TL;DR

```ts
// a simple interface
interface PersonalDetails {
  name: string;
  age: number;
}

// another simple interface
interface InvestmentDetails {
  folioNumber: string;
  joinedETFs: number;
}

// another simple interface
// which extends the `PersonalDetails`
// and `InvestmentDetails` interface
interface AllDetails extends PersonalDetails, InvestmentDetails {
  salary: number;
  isAdmin: boolean;
}

// a simple object using
// the extended `AllDetails` interface
const johnDetails: AllDetails = {
  name: "John Doe",
  age: 25,
  salary: 30000,
  isAdmin: true,
  folioNumber: "AJK23456",
  joinedETFs: 4,
}; // ✅ valid and satisfies the interface.
```

For example, let's say we have 2 `interfaces` called `PersonalDetails` and `InvestmentDetails` like this,

```ts
// a simple interface
interface PersonalDetails {
  name: string;
  age: number;
}

// another simple interface
interface InvestmentDetails {
  folioNumber: string;
  joinedETFs: number;
}
```

Now let's also consider another interface called `AllDetails` like this,

```ts
// a simple interface
interface PersonalDetails {
  name: string;
  age: number;
}

// another simple interface
interface InvestmentDetails {
  folioNumber: string;
  joinedETFs: number;
}

// another simple interface
interface AllDetails {
  salary: number;
  isAdmin: boolean;
}
```

Now to get the types from the `PersonalDetails` and the `InvestmentDetails` interface to the `AllDetails` interface we can use the `extends` keyword after the `AllDetails` interface name then followed by the names of the interfaces to get the types separated by the comma symbol (`,`). In our case, it is the `PersonalDetails` interface and the `InvestmentDetails` interface.

It can be done like this,

```ts
// a simple interface
interface PersonalDetails {
  name: string;
  age: number;
}

// another simple interface
interface InvestmentDetails {
  folioNumber: string;
  joinedETFs: number;
}

// another simple interface
// which extends the `PersonalDetails`
// and `InvestmentDetails` interface
interface AllDetails extends PersonalDetails, InvestmentDetails {
  salary: number;
  isAdmin: boolean;
}
```

We have successfully extended all the types from the `PersonalDetails` and the `InvestmentDetails` interface into the `AllDetails` interface and is now available to be used.

This is useful since we don't have to write the types by ourselves manually again.

Now let's use the `AllDetails` interface on an object like this,

```ts
// a simple interface
interface PersonalDetails {
  name: string;
  age: number;
}

// another simple interface
interface InvestmentDetails {
  folioNumber: string;
  joinedETFs: number;
}

// another simple interface
// which extends the `PersonalDetails`
// and `InvestmentDetails` interface
interface AllDetails extends PersonalDetails, InvestmentDetails {
  salary: number;
  isAdmin: boolean;
}

// a simple object using
// the extended `AllDetails` interface
const johnDetails: AllDetails = {
  name: "John Doe",
  age: 25,
  salary: 30000,
  isAdmin: true,
  folioNumber: "AJK23456",
  joinedETFs: 4,
}; // ✅ valid and satisfies the interface.
```

As you can see TypeScript accepts the object structure since it is valid and satisfies the `AllDetails` interface which confirms that the `extends` keyword is working correctly and the types got extended from the `PersonalDetails` and the `InvestmentDetails` interfaces.

See the above code live in [codesandbox](https://codesandbox.io/s/add-types-interface-from-multiple-interfaces-typescript-ofztr?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---