EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Inheritance
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

TypeScript Inheritance

TypeScript Inheritance

Introduction to TypeScript Inheritance

Inheritance is the basic concept which comes from the object-oriented programming language. Inheritance in TypeScript works in the same way like any other programming language because TypeScript is also an object-oriented language. In Inheritance, we have two concepts which is known as parent class and child class. In Inheritance, we inherit the properties of the super class, which termed as parent class and the one which is inheriting the super class called a child class; this is the basic concept of inheritance in any programming language.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,950 ratings)

Types of Inheritance in TypeScript

Inheritance in TypeScript comes up with two different types, but in other programming languages, we have so many different types of inheritance which can be used according to the requirement. But TypeScript supports basically two types which are single and multilevel inheritance. We have different types such as hybrid, multiple which typescript does not support.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

We basically have two types of inherits in TypeScript, which is as follows:

  • Single Inheritance
  • Multilevel Inheritance

1. Single Inheritance

In this type of inheritance, we can extend only one class or a single class. This is why it is called as single inheritance. This inheritance is also achieved by using the ‘extends’ keyword we already have. We will see one image to demonstrate the flow of single inheritance in TypeScript to know it better.

Flowchart:

Types of Inheritance in TypeScript

In the above image, we have two class available called as parent and child class. Here we are trying to extend the parent class using the child class. After this, we can use all its methods and filed inside the child object to perform our logic. Thus in this way, it also provides us usability of the code. We will also see one practice example of single inheritance in TypeScript.

Below is a sample example of how to use this in programming.

Example:

Code:

class Flower {
color():void {
console.log("This is a method in parent class");
}
}
class Rose extends Flower {
color():void {
console.log("This is a method in child class");
console.log("color of rose is red !!!");
}
}
console.log("Demo to show single inheritence in Typescript");
let myobject = new Rose();
myobject.color();

Output:

TypeScript Inheritance 1

2. Multilevel Inheritance

In this type of inheritance, we can derive a new class which is already being derived by another parent class; this type of relationship between parent and child is known as a multilevel inheritance in TypeScript. This inheritance is proceed in levels one, two, three and so on. Below we can see its flow chart of how it actually looks like and also the internally working of it to get more idea about this.

Flowchart:

Multilevel

In the above image or flowchart, we are creating three classes which follow multilevel inheritance in typescript. Here we have classes named as one, two and three. Class ‘one’ is the parent class for class ‘two’, which means it can use its property and behavior in its own class. But as you can see, we have one more class named class ‘three’, which again extends the class ‘two’ here. That means now this class can access the methods and fields of both classes. In this way, we can achieve multilevel inheritance in TypeScript. It is also very easy to use and hence provide the usability of the code.

Now we will see one sample example to implement this in TypeScript.

Example:

Code:

class Flower {
color():void {
console.log("This is a method in parent class");
}
}
class Rose extends Flower {
color():void {
console.log("This is a method in child class");
console.log("color of rose is red !!!");
}
}
class Lotus extends Flower {
color():void {
console.log("This is a method in child class");
console.log("color of Lotus is pink !!!");
}
}
console.log("Demo to show multiplevel inheritence in Typescript");
let myobject1 = new Rose();
myobject1.color();
let myobject2 = new Lotus();
myobject2.color();

Output:

color of lotus is pink

As we have already seen, the types of inheritance available in TypeScript or it supports. In the above lines of code, as you can see, we are creating one class calls as parent class ‘Flower’. We have a different variety of flowers, different color and so on. In this example, we are creating flower as the base class, which contain all the common methods inside it. After creating the parent class, we are certain different types of flower classes named ‘rose’ and ‘lotus’ in the above sample example. After this, we can use the parent class methods named as ‘color’ to define the color of each flower. So here we are providing implementation of methods asked on the child class; also, it allows us to remove the duplicate code from the application. If we do not have inheritance, then unnecessary, we have to create this method in every class. In this way, it has so many benefits also to use. This is the most basic concept of object-oriented programming language.

Basic Details and Components Available in Inheritance

Inheritance comes up with two things which are really very common in all its type. It supports the parent-child relationship in any programming language.

Let’s see the parent-child relationship in detail:

1. Parent class/ super class/ base class

The parent class is also known as the base class, super class in TypeScript inheritance. A class which is used to get the property and behavior is called the parent class. All the methods, variable and other stuff of the parent class will be used by the child class.

2. Child class/ sub class/ derived class

The child class is also known as the sub class, derived class in inheritance. When a class which inherits the property and behavior of the parent class, it is known as the child class or derived class in TypeScript inheritance. This class is now able to use the methods, constructors and other stuff of the class.

Now we will see how to achieve inheritance in programming in detail:

  • extends: We can use the ‘extends’ keyword like any other programming language; we achieve inheritance in typescript as well. We have to use this keyword in between the two class names while programming. After this, only we will be able to access the properties of the parent class inside the child class. Let’s see one sample syntax to understand how to use this while programming.

Example:

Code:

class one 'extends' class second

Conclusion

TypeScript does not support all the types of inheritance; it supports only two types. Inheritance is very easy to use and implement in TypeScript. As we mentioned above, we just have to use extends keyword before and after the parent and child class. Thus provide the reusability of the code, make it readable and easier to understand.

Recommended Articles

This is a guide to TypeScript Inheritance. Here we discuss the introduction, types of inheritance, basic details and components available in inheritance. You may also have a look at the following articles to learn more –

  1. TypeScript Functions
  2. TypeScript Operators
  3. TypeScript Versions
  4. What is TypeScript?
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more