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.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn