How to Extend an Interface from a class in TypeScript ?

In this article, we will try to understand how we to extend an interface from a class in TypeScript with the help of certain coding examples. Let us first quickly understand how we can create a class as well as an interface in TypeScript using the following mentioned syntaxes:

Syntax: 

This is the syntax for creating a class. We may use the below syntax for creating a class in TypeScript:

class class_name {
    ...
}

This is the syntax for creating an interface. We may use the below syntax for creating an interface in TypeScript:

interface interface_name {
    ...
}

Now that we have understood the basic syntaxes for creating a class and an interface, let us understand those syntaxes along with the main objective of how we could extend an interface from a class with the help of the following coding examples:

Example 1:

• In this example,  a class will be defined which will have some variable defined within it.
• Then an interface would be constructed which will extend the above class and inside that interface, one method will be defined declared but its definition would be defined laterwards in some different class.
• Then another class will be created which is responsible for extending the parent class along with the interface so defined.
• Thereafter for this derived class, one object will be instantiated and will be used further to print the result which is defined inside the method, and that method is defined in the derived class whose declaration is provided in the interface itself.

Javascript

// Parent class creation
class Person {
    public name: string;
}

// Interface extended from the above class
interface Details extends Person {
    details(): void;
}

// Using the above illustrated interface and class together
class Person_Details extends Person implements Details {
    details(): void {
        this.name = "GeeksforGeeks";
        console.log(this.name);
    }
}

let object = new Person_Details();
object.details();

Output:

GeeksforGeeks

Example 2:

• In this example, a class which is inferred as the parent class is created which is having different variables declarations within it.
• Thereafter, two interfaces (or multiple interfaces) would be defined each containing separate methods declarations within them whose definitions will be defined laterwards within a separate class (which is inferred as a derived class).
• Thereafter a derived class is created which is responsible for extending the parent class as well as the interfaces defined.
• Then at last, an object is instantiated which is responsible for calling all the methods which are defined in the derived class which will eventually contain the result.

Javascript

// Parent class declaration
class Student {
    public id: number;
    public name: string;
}

// Creating multiple interfaces which
// will extend the above class
interface Student_1 extends Student {
    student1_details(): void;
}

interface Student_2 extends Student {
    student2_details(): void;
}

// Creating a class which will extend
// the above interfaces
class Student_Details extends Student implements Student_1, Student_2 {
    student1_details(): void {
        this.name = "Apple";
        this.id = 1;
        console.log(this.id + " - " + this.name);
    }

    student2_details(): void {
        this.name = "Banana";
        this.id = 2;
        console.log(this.id + " - " + this.name);
    }
}

let student_object = new Student_Details();
student_object.student1_details();
student_object.student2_details();

Output:

1 - Apple
2 - Banana