How to Extend Type in TypeScript

This article helps us understand how to extend type in TypeScript works with the help of some examples.

Extend Type in TypeScript

Unfortunately, in TypeScript, it is not possible to extend types. We can only extend the Interface and class.

We can use interfaces or classes to specify types and extend them. We will go through examples and try to extend the interface for types.

We have an interface called Project, which contains two methods described below.

One is called submit(), and the second is called queue().

interface Project {
    submit(data: string): boolean
    queue(data: string): boolean
}

We have many classes that use the project interface. We have to use a new method for the project interface that submits any requirements.

Requirements(data: string, id: number): void

If we want to break the current code using the project interface, TypeScript provides a later() method that can be used. We can create a new interface that extends the project interface by avoiding this.

interface ProjectManagement extends Project {
    Requirements(data: string, id: number): boolean
}

We can use the extends keyword to extend an interface with this syntax.

interface D {
    d(): void
}
interface K extends D {
    k(): void
}

The interface K extends the interface D. They both have methods d() and k().

ProjectManagement interface takes over the two methods submit() and queue() from the project interface, like classes.

class PM implements ProjectManagement {
    Requirements(data: string, id: number): boolean {
        console.log(`Send data to ${id} in ${sec} ms.`);
        return true;
    }
    submit(data: string): boolean {
        console.log(`Sent data to ${id} after ${sec} ms. `);
        return true;
    }
    queue(data: string): boolean {
        console.log(`Queue an project to ${id}.`);
        return true;
    }
}

Interfaces Extending Multiple Interfaces in TypeScript

An interface can extend many interfaces and create a mixture of all the interfaces. Let’s discuss with the help of an example.

interface A {
    a(): void
}
interface E {
    e(): void
}
interface M extends E, A {
    m(): void
}

We can see that interface M extends the interfaces E and A. M has all the E and A interface methods, a() and e().

Interfaces Extending Classes in TypeScript

The interface takes over the properties and methods of the class. TypeScript grants an interface to extend a class.

The interface takes over the private and protected members of the class. The interface cannot takeover only public members.

The interface of that class can only be implemented by the class or subclass from which the interface extends. It means when an interface extends a class with private or protected members.

If we implement the interface from a class that is not a subclass of that class that the interface takeover, we will get an error.

Here is an example below.

class Key {
    private value: boolean;
}
interface Lock extends Key {
    enable(): void
}
class FingerPrint extends Key implements Lock {
    enable() { }
}
class Notification extends Key implements Lock {
    enable() { }
}
class Identity extends Key { }{
    enable() { }
}

An interface can extend one or many existing interfaces. The class or subclass can only implement the interface of that class.