TypeScript Tutorial: Understanding Inheritance (Chapter 7)

Till now we have talked about DataTypes, Functions, Interfaces and Classes during our short tutorial series on beginning with TypeScript. I hope you have enjoyed reading them as much as I did writing. I have recently updated the topic list to include modules and typings in there. In case you have not seen the start of this tutorial, you can go to the beginning by following the link shared at the bottom of this post. By the way Understanding Inheritance is the topic of this post.

A TypeScript Tutorial for beginners on TypeScript

Understanding Inheritance

I am not going to bother you with huge technical jargons here, but a simple statement, “when some class of object owns a property or behaviour because of its parent, it is called inheritance”. Wasn’t that easy peasy? You have eyes of your mother, when said that means you have inherited that property from your parents. In the world of Object Oriented Programming the similar rule of thumb is portrayed. You can define a class and then tell that this is going to have few properties from another class. TypeScript also have provided this capability to the developers to use this principle.

Employee is a Person

In the OOPs world a similar statement is very commonly used. Let’s understand that with an example here.

// person class
class Person {
    // parameterized constructor
    constructor(public FirstName: string, public LastName: string) { }
}

// employee extends a person
class Employee extends Person {
    public JobTitle: string;
}

let employee = new Employee("John", "Doe");

employee.JobTitle = "Manager";

Above code solves two purposes, one to justify our statement and second to demonstrate the inheritance in TypeScript. With this code we can clearly say that an Employee is a person but a person is not an employee. That means if we have an Employee, we can deduce that he is a Person. But, if we have a person, we can’t tell that he is an Employee. That means i can create and instance of Employee and store that in a Person not vice-versa. The below code block will give you error during the compile time, ‘Type ‘Person’ is not assignable to type ‘Employee’.

// person class
class Person {
    // parameterized constructor
    constructor(public FirstName: string, public LastName: string) { }
}

// employee extends a person
class Employee extends Person {
    public JobTitle: string;
}

let person:Person = new Person("John", "Doe");

let employee:Employee = person;

Multiple Inheritance

Understanding inheritance is not that simple, especially if you try to relate everything to real world examples. You may have the features of both of your parents, but in the world of OOPs, it is not possible. As that of many other object oriented programming languages TypeScript also doesn’t support multiple inheritance. That means your new class can only inherit properties from a single parent class. There can’t be a class definition which extends 2 or more classes.

But we can implement an interface, which specifies the required properties, a class definition should have. We have modified the above code to show this.

interface IPerson {
    FirstName: string;
    LastName: string;
}

interface IEmployee {
    JobTitle: string;
}
// person class
class Person implements IPerson {
    // parameterized constructor
    constructor(public FirstName: string, public LastName: string) { }
}

// manager implements person and employee
class Manager extends Person implements IEmployee {
    constructor(public FirstName: string, public LastName: string) {
        super(FirstName, LastName);
        this.JobTitle = "Manager";
    }
    readonly JobTitle: string;
}

So, now we have 2 interfaces for IPerson and IEmployee with 2 classes one implementing only IPerson interface and another extending Person class and implementing the IEmployee. At the end we have a class named Manager, which has properties of a person and an employee. Inheriting from an interface helps us simulating the multiple inheritance and makes our code more extensible.

we have made JobTitle readonly as for a class name Manager the JobTitle must be Manager only in all the instance and that should not be changeable.

Identify a different scenario yourself and try to use inheritance there. As a test practice, create an Animal class and create Mammals and Birds interface to create classes for Cow and Sparrow.

Don’t hold it there!

The above text of this chapter only shows a basic concept of inheritance in TypeScript. There are so many other aspects for understanding inheritance with the perspective of TypeScript, which I will not be covering up here as the scope of this post. But, you don’t hold it there. If you need to go deeper during the beginning of the TypeScript learning process, I will not be stopping you.

My suggestion will be to keep yourself constraint and finish this small tutorial first and then jump into the advanced and more deeper study of TypeScript. I will be posting a few more chapters on this tutorial, which will make your base of TypeScript stronger. Form there you will be able to easy explore more and enhance your knowledge. I will leave you to your decision.

Have a nice day and happy learning!

Go to Beginning with TypeScript Tutorial Index page.

Published by

Anant Anand Gupta

Microsoft Technology Professional

Leave a Reply