TypeScript Inheritance

Inheritance is the ability of a class to extend the functionality of another class. Former one is called Child Class or Sub Class and the later is called Parent Class or Super Class. Hence, Child Class can inherit the properties (state) and functions (behavior) and they themselves can have additional class variables and functions, thus extending.

Syntax

To realize the inheritance of a class to another, the keyword extends is used. Following is the syntax to declare the inheritance of a class to other class :

class ChildClassName extends ParentClassName{
    // class body
}
ADVERTISEMENT

Example – TypeScript Inheritance

In this example, we shall consider Person as Parent class and Student as Child class. Justification is that, a Person can be a Student and Student class can inherit the properties and behaviors of Person Class, but Student class has additional properties and functionalities.

example.ts

class Person{
    name:string

    speak():void{
        console.log(this.name+" can speak.")
    }
}

class Student extends Person{
    // variables
    rollnumber:number

    // constructors
    constructor(rollnumber:number, name1:string){
        super(); // calling Parent's constructor
        this.rollnumber = rollnumber
        this.name = name1
    }

    // functions
    displayInformation():void{
        console.log("Name : "+this.name+", Roll Number : "+this.rollnumber)
    }
}

var student1 = new Student(2, "Rohit")
var student2 = new Student(4, "Kohli")

// accessing variables
console.log("Student 1 name is : "+student1.name)
console.log("Student 2 roll number is : "+student2.rollnumber)

console.log("\n---Student 1---")
// calling functions
student1.displayInformation()
// calling funciton of parent class
student1.speak()

console.log("\n---Student 2---")
student2.displayInformation()
student2.speak()

name variable is declared in Person Class. But as the Student Class inherits Person Class, the name variable could be accessed by the object of Student Class. The same explanation holds for the function speak() which is defined in Person Class, and could be accessed by the object of Student Class.

Compile the above code to JavaScript code using tsc, and execute the javascript online.

Output

Student 1 name is : Rohit
Student 2 roll number is : 4
 
---Student 1---
Name : Rohit, Roll Number : 2
Rohit can speak.

---Student 2---
Name : Kohli, Roll Number : 4
Rohit can speak.

The compiled JavaScript code looks like following.

example.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Person = /** @class */ (function () {
    function Person() {
    }
    Person.prototype.speak = function () {
        console.log(this.name + " can speak.");
    };
    return Person;
}());
var Student = /** @class */ (function (_super) {
    __extends(Student, _super);
    // constructors
    function Student(rollnumber, name1) {
        var _this = _super.call(this) || this;
        _this.rollnumber = rollnumber;
        _this.name = name1;
        return _this;
    }
    // functions
    Student.prototype.displayInformation = function () {
        console.log("Name : " + this.name + ", Roll Number : " + this.rollnumber);
    };
    return Student;
}(Person));
var student1 = new Student(2, "Rohit");
var student2 = new Student(4, "Kohli");
// accessing variables
console.log("Student 1 name is : " + student1.name);
console.log("Student 2 roll number is : " + student2.rollnumber);
console.log("\n---Student 1---");
// calling functions
student1.displayInformation();
// calling funciton of parent class
student1.speak();
console.log("\n---Student 2---");
student2.displayInformation();
student2.speak();

Conclusion

In this TypeScript Tutorial, we have learnt about TypeScript Inheritance, and how this Object Oriented Concept could be used to extend the functionality of a class in another class.