To add types to an interface from another interface (aka extending the types) in TypeScript, you can use the extends
keywords after the interface name followed by the name of the interface to get the types from.
TL;DR
// a simple interface
interface PersonalDetails {
name: string;
age: number;
}
// another simple interface
// which extends the `PersonalDetails` interface
interface AllDetails extends PersonalDetails {
salary: number;
isAdmin: boolean;
}
// a simple object using
// the extended `AllDetails` interface
const johnDetails: AllDetails = {
name: "John Doe",
age: 25,
salary: 30000,
isAdmin: true,
}; // ✅ valid and satisfies the interface.
For example, let's say we have an interface
called PersonalDetails
like this,
// a simple interface
interface PersonalDetails {
name: string;
age: number;
}
Now let's also consider another interface called AllDetails
like this,
// a simple interface
interface PersonalDetails {
name: string;
age: number;
}
// another simple interface
interface AllDetails {
salary: number;
isAdmin: boolean;
}
Now to get the types from the PersonalDetails
interface to the AllDetails
interface we can use the extends
keyword after the AllDetails
interface name then followed by the name of the interface to get the types from. In our case, it is the PersonalDetails
interface.
It can be done like this,
// a simple interface
interface PersonalDetails {
name: string;
age: number;
}
// another simple interface
// which extends the `PersonalDetails` interface
interface AllDetails extends PersonalDetails {
salary: number;
isAdmin: boolean;
}
We have successfully extended all the types from the PersonalDetails
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,
// a simple interface
interface PersonalDetails {
name: string;
age: number;
}
// another simple interface
// which extends the `PersonalDetails` interface
interface AllDetails extends PersonalDetails {
salary: number;
isAdmin: boolean;
}
// a simple object using
// the extended `AllDetails` interface
const johnDetails: AllDetails = {
name: "John Doe",
age: 25,
salary: 30000,
isAdmin: true,
}; // ✅ 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.
See the above code live in codesandbox.
That's all 😃!