How to inherit a class in TypeScript? -- TypeScript Tutorial for beginners
TypeScript Tutorial for beginners, Angular Tutorial for beginners, Getting started with TypeScript Tutorial for absolute beginners, Getting started with Angular for absolute beginners, Learn Angular from scratch, Learn Angular from scratch, Tutorial, TypeScript, TypeScript Tutorial, Getting started with TypeScript, How to inherit a class in TypeScript?, How to instantiate a class in TypeScript?, How to call the base class constructor in TypeScript? -- Just like any other OOPs supported languages, TypeScript also allows you to inherit a base class. In the last article, we learned how to create class in TypeScript. We have also learned how to create a constructor and how to instantiate a class object. In this article of the TypeScript Tutorial for beginners series, we will learn how to inherit a TypeScript class. Continue reading to learn it today.- Article by Kunal Chowdhury on
Just like any other OOPs supported languages, TypeScript also allows you to inherit a base class. In the last article, we learned how to create class in TypeScript. We have also learned how to create a constructor and how to instantiate a class object.
In this article of the TypeScript Tutorial for beginners series, we will learn how to inherit a TypeScript class. Continue reading to learn it today.
👉 TypeScript Tutorial - Getting started with TypeScript
Inheritance in TypeScript
In TypeScript, you can inherit a class from another class. Just use theextends
keyword to perform inheritance. Consider the following example to understand it better:
class Person { // properties firstName: string; lastName: string; // construtor constructor (fName: string, lName: string) { // fill the properties this.firstName = fName; this.lastName = lName; } // method getFullName() { return `${firstName} ${lastName}`; } } class Employee extends Person { // properties empID: string; designation: string; // construtor constructor (fName: string, lName: string, eID: string, desig: string) { // call the base class constructor super(fName, lName); // fill the other properties this.empID = eID; this.designation = desig; } // method toString() { return `${empID} - ${firstName} ${lastName} => ${designation}`; } }
Here the Employee
class inherits its base Person
by writing class Employee extends Person
. In the derived class super(...)
can be used to call the constructor of the base class. For example, super(fName, lName)
in Employee
class constructor calls the base class constructor by passing the parameter values fName
and lName
.
Now, in the following code snippet, we created the instance of the Employee
class and passed four parameters to its constructor. In the implementation of the Employee
class constructor, we called the base class constructor to pass the first name and last name of the employee. So, when you call the toString()
method of the derived class, it will print out both the properties.
let employee: Employee = new Employee("Kunal", "Chowdhury", "EMP001022", "Software Engineer" ); console.log(employee.toString());
Summary
Let's summarize what we learned today. We learned how to inherit a class from a base class in TypeScript using the extends
keyword. Then we discussed how to call a base class constructor by passing the respective values to it. In the next article of this tutorial series, we will discuss about interface. Till then, happy learning!
👉 TypeScript Tutorial - Getting started with TypeScript