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