Click here to Skip to main content
13,772,645 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

1.8K views
1 bookmarked
Posted 22 Jun 2018
Licenced CPOL

How to Inherit a Class in TypeScript - TypeScript Tutorial for Beginners

, 22 Jun 2018
Rate this:
Please Sign up or sign in to vote.
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.

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.

Inheritance in TypeScript

In TypeScript, you can inherit a class from another class. Just use the extends keyword to perform inheritance. Consider the following example to understand it better:

class Person {
 // properties
 firstName: string;
 lastName: string;
 
 // constructor
 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;
 
 // constructor
 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:


You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.181119.1 | Last Updated 22 Jun 2018
Article Copyright 2018 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid