In this tutorial, I will explain how to use the extends keyword in TypeScript to inherit all the properties from an existing interface. We’ll cover how classes can extend interfaces and the resulting JavaScript code and discuss some practical code examples. You will learn how to extend interfaces with classes in TypeScript.
What Does It Mean for a Class to Extend an Interface in TypeScript?
First, let’s clarify what it means for a class to extend an interface in TypeScript. When a class extends an interface, it is essentially saying “I promise to adhere to the contract defined by this interface”. The class must implement all the properties and methods specified in the interface. This allows for polymorphism and code reusability.
Basic Example
Here’s a simple example to understand the syntax:
interface Employee {
name: string;
id: number;
getSalary(): number;
}
class FullTimeEmployee implements Employee {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
getSalary(): number {
// implementation here
}
}
In this example, we define an Employee
interface with a few properties and a getSalary
method. The FullTimeEmployee
class implements this interface, providing an implementation for each interface member.
Check out Functions in TypeScript Interfaces
Extend Classes with Interfaces in TypeScript
Interfaces can extend classes in TypeScript, including their private and protected members. This allows for flexible and powerful abstraction.
Advanced Example
Now, let me give you an advanced example.
class Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
}
interface Employee extends Person {
id: number;
getSalary(): number;
}
class FullTimeEmployee extends Person implements Employee {
id: number;
constructor(name: string, id: number) {
super(name);
this.id = id;
}
getSalary(): number {
// implementation here
}
}
Here the Employee
interface extends the Person
class, inheriting its protected name
property. The FullTimeEmployee
class then implements Employee
while extending Person
, demonstrating how classes can extend both interfaces and classes simultaneously.
Read Check if an Object Implements an Interface in TypeScript
When to Use Interfaces vs Classes
So when should you use interfaces, and when should you use classes? A general rule of thumb is to use interfaces for defining types and classes for defining implementations. Interfaces provide a lightweight way to define contracts without any run-time overhead, while classes allow you to define actual implementations with real code.
Conclusion
In this tutorial, I explained how to extend interfaces with classes in TypeScript with a few examples.
You may also like:
- How to Use Optional Parameters in TypeScript Interfaces?
- Check if an Object is Type of Interface in TypeScript
- TypeScript Interface Function Properties
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.