Typescript: The story of Inheritance

Inheritance is the concept of adding new implementation to the same structure. Basically, when the object/class is based on another object/class in the uses either same implementation/modified implementation of the same structure. There are two major classes of Inheritance:

  • Base Class serves as the Base/Parent to the all the classes which are inheriting its properties and behavior. 
  • Derived Class inherits behavior from the Base Class and makes changes or addition to the inherited behavior.

Think of this as a Parent-Child relationship where Child inherits from their parents. In addition to inheriting behavior from parents, the child sometimes has the additional behavior. Similarly, the same concept can be implemented in the programming methodology. In more general terms, Humans and Whales are both parts of the mammal family. Humans are creatures above land and Whales lives in the sea/ocean, although they have similarity as Mammal but they additional behavior which are pertaining to their eco-systems.

Let’s take an example of Bank structure to understand the concept of inheritance. In a bank, we have Employees and Customers as one of the important entities in a Bank system. As customers and employees, both represent a person but they are different from each other. An employee serves the customer and gets the salary from the bank. A customer manages a bank account or takes a loan from the bank. These entities are similar and yet different from each other. The common information for all the bank employee and customers can be stored in a Parent class called Person. 

The Class definition of Parent Class: Person is defined below with the common parameters for inheriting Customer and Employee Class. In all of our examples, we will be following the Camel Casing in order to get used to the industry standards while writing the code. 

Code for the Parent Class:

Person Class: This class contains information on the basic details of an employee or a customer like a name, age, father’s and mother’s name, date of birth and address. This information is needed by the bank for maintaining every person’s record whether it’s an employee or a customer.  

In the Person class, we have created a simple function addBalance without any implementation to show the concept of implementing methods in the child class which are inheriting it from the parent class. 

 

Code for Child Class: 

Child classes in our example are Employee and Customer which similar properties defined in the Person class from which they are extending. These classes have additional information apart from parent class like Employee have employee ID, salary, the department in which he works in, job ID and account information too.  

The addBalance function in case of the employee does add salary to the account of the employee and generates a message on the webpage that the salary has been credited to the account of the employee. 

In case of Customer class, it contains all the customer information such as customerID (which is the account number of the customer), account type, account balance. This information is similar to the employee but different as employee class contains employee information such as employee number, employee’s salary. 

Moreover, the addBalance function for the customer is different from that of the employee. In this case, we are adding balance which is deposited by the customer at the bank. This amount is credited usually at random times, not like employee where specific amount would be added every month. For the sake of simplicity, we have not shown the implementation of the salary addition every month.
addBalance method in both the classes are generating an alert message as soon the balance is added to the account of the customer.

As it is observable, constructor and the function addBalance contains keyword super in their code block. The keyword ‘super’ is used in inheritance in Typescript when we want to access the object/element/function from the base class. 

In the constructor of the derived class, the super keyword is used to execute the constructor of the parent class. This keyword is also utilized in the functions of the derived class to call the function of the superclass in order to remove any ambiguity which might occur while running the code with the same name in both the derived class and base class. 

 

Now, we have written the class and implementation of the code. We want to use this code in a webpage, so, we will try to initialize object of the class and the functions associated with it during the on-load of the webpage.  

Last but not the least…

After writing the typescript code, we will be compiling the code into javascript. As we know, typescript is superset of javascript so, with the following command we will be able to get the javascript code of the typescript:  

tsc inheritance.ts 

You can check the code by running it in Node.js with a simple command as follows:

node inheritance.js

In order to run the script, you need to create a node project with sufficient node packages.

Now, the HTML code which is basic webpage implementation with some text will be sourcing the script from the JavaScript file created after the compiling the code. In our example, we have used alert boxes, therefore, there is not much need to write in the code here. We will be calling the on-load method of the script. 

 

What’s there in Typescript?

Yes, the example above was a basic implementation of Inheritance but Typescript has introduced the concept of modules(though it has been there for a while). In Typescripts, there are two kinds of modules Import and Export Module.

Import-Module: Import Modules are the modules imported in a particular typescript file for usage of the classes, interface inside the module.

Export-Module: Export Modules are the modules exported from a particular typescript file for exporting the classes, interfaces outside the module in other modules.

We can choose to export all or particular classes inside a module and similarly import all or selected classes from a module. This feature comes in handy when we have to use specific classes or interfaces from a particular class and hide other classes which might not be needed or present some privacy concerns.

The Typescript implementation of the same code using both import and export module is given below in the StackBlitz example:

SUMMARY

In this post, we started off with understanding the basics of inheritance, that is, what is inheritance? Long story short, Inheritance is a way by which a child gets what is owned by the parent. It can be applied to any real-life scenario. The concept was explained further with the detail on a banking scenario where customer and employee inherit common properties of human but are different. In this simple real-life example, the concept of inheritance is evident.

Next Steps…

You can further play with inheritance and the topics which I have not touched yet in Inheritance: Types of inheritanceInterfaces, etc For more details about Typescript, you can always refer to the official documentation.