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
}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.
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.