In this article, we’ll try to understand how to extend TypeScript interfaces with coding examples. To enlarge an interface in TypeScript with other interfaces, you must use the extends keyword with the name of the interface you want to expand. Let’s figure it out together.
Extend an interface in Typescript
We can extend the interface in TypeScript to include other interfaces. This allows us to create new interfaces containing definitions from other interfaces. Interface extensions give us more flexibility in defining interfaces and reusing existing interfaces.
Extend the interface by including other interfaces.
We extend the interface using the extends keyword after the interface and its name.
This example extends the Student interface, including StudyResult. Student objects must have all properties from both interfaces.
Example:
interface StudyResult {
subjectScore: number;
subject: string;
}
// Using the extends keyword to extend an Interface
interface Student extends StudyResult {
name: string;
age: number;
GetName(): string;
}
let student: Student = {
name: "John",
age: 20,
GetName(): string {
return this.name + " : " + this.age;
},
subjectScore: 10,
subject: "Software Technology",
};
console.log(student);Output:
{
"name": "John",
"age": 20,
"subjectScore": 10,
"subject": "Software Technology"
}Extend an interface by including other class
TypeScript allows interfaces to extend classes. In this case, the interfaces inherit the properties and methods of the class. Furthermore, interfaces can inherit not only public members but also secret and protected class members.
This means that an interface extends a class with private or protected members. An interface is implemented only by the class or subclasses of the class from which it derives.
Example:
class People {
gender: string;
address: string;
}
// Using the extends keyword to extend an Interface
interface Student extends People {
name: string;
age: number;
GetName(): string;
}
let student: Student = {
name: "Mary",
age: 20,
GetName(): string {
return this.name + " : " + this.age;
},
gender: "Female",
address: "New York City, New York",
};
console.log(student);Output:
{
"name": "Mary",
"age": 20,
"gender": "Female",
"address": "New York City, New York"
}Extending an interface from several other interfaces.
Example:
interface StudyResult {
subjectScore: number;
subject: string;
}
interface Address {
streetName: string;
city: string;
}
// Using the extends keyword to extend from several other interfaces.
interface Student extends StudyResult, Address {
name: string;
age: number;
GetName(): string;
}
let student: Student = {
name: "John",
age: 20,
GetName(): string {
return this.name + " : " + this.age;
},
subjectScore: 10,
subject: "Software Technology",
streetName: "Wall Street",
city: "New York City",
};
console.log(student);Output:
{
"name": "John",
"age": 20,
"subjectScore": 10,
"subject": "Software Technology",
"streetName": "Wall Street",
"city": "New York City"
}Summary
Through the article, we have learned how to extend an interface by including other interfaces and extend an interface by including other classes. We also know how to extend from several other interfaces. Hope the article is helpful to you. Thanks for reading.
Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).