Difference Between Extends and Implements in TypeScript

In one of my recent TypeScript projects, I designed a system that required different devices to support a set of common functionalities. In that, some devices could connect to Wi-Fi, others could stream content, and a few could do both. After searching for solutions, I found out that it can be done using the extends and implements keywords in TypeScript correctly.

In TypeScript, the extends keyword is used for inheritance, allowing a class or interface to build upon another. On the other hand, the implements keyword is used to ensure a class satisfies the contract defined by an interface.

In this tutorial, we’ll discuss the difference between extends and implements in TypeScript with examples to see their use cases.

Understanding the extends Keyword in TypeScript

The extends keyword is used in TypeScript to create a new class or interface that inherits properties and methods from an existing class or interface. This is known as inheritance and is a fundamental concept in object-oriented programming.

Class Inheritance With extends Keyword in TypeScript

When a class extends another class, it inherits all the properties and methods of the parent class. This allows the child class to reuse the code from the parent class and add its own properties and methods.

Let’s say you’re building an e-commerce platform, and you have a User class that contains shared properties like name and email. Now, you want a Customer class that includes all the properties of User plus some customer-specific ones like purchaseHistory.

Example:

class User {
    name: string;
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }

    login(): void {
        console.log(`${this.name} logged in with ${this.email}`);
    }
}

class Customer extends User {
    purchaseHistory: string[];

    constructor(name: string, email: string, purchaseHistory: string[]) {
        super(name, email);
        this.purchaseHistory = purchaseHistory;
    }

    viewOrders(): void {
        console.log(`${this.name}'s purchases: ${this.purchaseHistory.join(', ')}`);
    }
}

const customer = new Customer("Alice", "alice@example.com", ["Laptop", "Phone"]);
customer.login();       // Alice logged in with alice@example.com
customer.viewOrders();  // Alice's purchases: Laptop, Phone

Output:

In this example, the Customer class extends the User class, inheriting its properties and methods. The User class also adds its own method,viewOrders().

Check out: Type vs Interface in TypeScript

Extending Interfaces With extends Keyword in TypeScript

Interfaces in TypeScript can also be extended. This allows you to create new interfaces that build on existing ones, adding additional properties or methods.

Example:

interface Person {
    name: string;
    age: number;
}

interface Employee extends Person {
    employeeId: number;
}

const employee: Employee = {
    name: 'John Doe',
    age: 30,
    employeeId: 1234
};

console.log(employee);

Output:

In this example, the Employee interface extends the Person interface, adding the employeeId property.

Understanding implements Keyword in TypeScript

The implements keyword is used to ensure that a class adheres to a specific interface. When a class implements an interface, it must provide implementations for all the properties and methods defined in that interface.

Implementing Interfaces with Implements Keyword in TypeScript

Implementing an interface ensures that a class provides specific functionality as defined by the interface. This is useful for enforcing a contract that a class must follow.

Let’s say you’re building a server monitoring system, and every service (HTTP, DB, Cache) should be able to start and stop.

Example:

interface Service {
    start(): void;
    stop(): void;
}

class DatabaseService implements Service {
    start(): void {
        console.log("Database started.");
    }

    stop(): void {
        console.log("Database stopped.");
    }
}

const dbService = new DatabaseService();
dbService.start(); // Database started.
dbService.stop();  // Database stopped.

Output:

In this example, the DatabaseService class implements the Service interface, ensuring that it provides a start and stop method.

Check out: TypeScript let vs var Difference

Multiple Implementations With Implements Keyword in TypeScript

A class in TypeScript can implement multiple interfaces, ensuring that it adheres to multiple contracts.

Let’s take an example of a smart device, such as a smart TV, that can both connect to Wi-Fi and stream content. You can model this with multiple interfaces:

Example:

interface Connectable {
    connect(): void;
}

interface Streamable {
    stream(): void;
}

class SmartTV implements Connectable, Streamable {
    connect(): void {
        console.log("Connected to Wi-Fi.");
    }

    stream(): void {
        console.log("Streaming Netflix.");
    }
}

const tv = new SmartTV();
tv.connect(); // Connected to Wi-Fi.
tv.stream();  // Streaming Netflix.

Output:

In this example, the SmartTV class implements both the Connectable and Streamable interfaces, ensuring it provides concrete implementations for the connect and stream methods defined in each interface.

Check out: Difference Between Let vs Const in TypeScript

Key Differences Between extends and implements

• extends is used for class inheritance, allowing a class to inherit properties and methods from another class. It can also be used to extend interfaces.
• implements is used to enforce a class to adhere to an interface, ensuring that the class provides specific methods and properties defined by the interface.
• A class can extend only one class but can implement multiple interfaces.

Summary Table

Conclusion

In this TypeScript tutorial, we have learned the key differences between the extends and implements keywords in TypeScript. In the above examples, we have learned that the extends keyword is used to inherit properties and methods from a class or interface. The implements keyword is used to ensure that a class follows the structure defined by an interface.

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/