Summary: in this tutorial, you will learn how to extend an interface that allows you to copy the properties and methods of one interface to another.
Interfaces extending one interface
Suppose that you have an interface called Mailable
that contains two methods called send()
and queue()
as follows:
interface Mailable {
send(email: string): boolean
queue(email: string): boolean
}
Code language: TypeScript (typescript)
And you have many classes that already implemented the Mailable
interface.
Now, you want to add a new method to the Mailable
interface that sends an email later like this:
later(email: string, after: number): void
Code language: TypeScript (typescript)
However, adding the later()
method to the Mailable
interface would break the current code.
To avoid this, you can create a new interface that extends the Mailable
interface:
interface FutureMailable extends Mailable {
later(email: string, after: number): boolean
}
Code language: TypeScript (typescript)
To extend an interface, you use the extends
keyword with the following syntax:
interface A {
a(): void
}
interface B extends A {
b(): void
}
Code language: TypeScript (typescript)
The interface B
extends the interface A
, which then has both methods a()
and b()
.
Like classes, the FutureMailable
interface inherits the send()
and queue()
methods from the Mailable
interface.
The following shows how to implement the FutureMailable
interface:
class Mail implements FutureMailable {
later(email: string, after: number): boolean {
console.log(`Send email to ${email} in ${after} ms.`);
return true;
}
send(email: string): boolean {
console.log(`Sent email to ${email} after ${after} ms. `);
return true;
}
queue(email: string): boolean {
console.log(`Queue an email to ${email}.`);
return true;
}
}
Code language: TypeScript (typescript)
Interfaces extending multiple interfaces
An interface can extend multiple interfaces, creating a combination of all the interfaces. For example:
interface C {
c(): void
}
interface D extends B, C {
d(): void
}
Code language: TypeScript (typescript)
In this example, the interface D
extends the interfaces B
and C
. So D
has all the methods of B
and C
interfaces, which are a()
, b()
, and c()
methods.
Interfaces extending classes
TypeScript allows an interface to extend a class. In this case, the interface inherits the properties and methods of the class. Also, the interface can inherit the private and protected members of the class, not just the public members.
It means that when an interface extends a class with private or protected members, the interface can only be implemented by that class or subclasses of that class from which the interface extends.
By doing this, you restrict the usage of the interface to only classes or subclasses of the class from which the interface extends. If you attempt to implement the interface from a class that is not a subclass of the class that the interface inherited, you’ll get an error. For example:
class Control {
private state: boolean;
}
interface StatefulControl extends Control {
enable(): void
}
class Button extends Control implements StatefulControl {
enable() { }
}
class TextBox extends Control implements StatefulControl {
enable() { }
}
class Label extends Control { }
// Error: cannot implement
class Chart implements StatefulControl {
enable() { }
}
Code language: PHP (php)
Summary
- An interface can extend one or multiple existing interfaces.
- An interface also can extend a class. If the class contains private or protected members, the interface can only be implemented by the class or subclasses of that class.