Post
Ask Question

Inheritance In TypeScript

Introduction

 
In this article and code example, I am going to explain how to implement inheritance in TypeScript.
 
TypeScript is a platform-independent programming language that is a superset of JavaScript. It is compatible with JavaScript because the generated code is JavaScript; that means we can write Inheritance in TypeScript code and run it as JavaScript code. TypeScript has a syntax that is very similar to JavaScript but adds features, such as classes, interfaces, inheritance, support for modules, Visual Studio Plug-in, etc. Learn more What is TypeScript here.
 

Inheritance

 
Inheritance is the process by which we can acquire the feature of another class. There is a Base class and the derived class, the derived class can access the features of the base class. Inheritance is of many types, Single, Multiple, Multilevel, Hybrid, etc. In this article, I explain the concept of Simple Inheritance.
 
Now to see how it works, let's use the following.
 
Step 1. Open Visual Studio 2012 and click "File" -> "New" -> "Project..." as shown below.
 
New-Project-Selection-In-TypeScript.jpg
 
In this select HTML Application with TypeScript under Visual C# template and give the name of your application as "inheritance" and then click OK.
 
Step 2. The structure of the files present in the application is:
 
Structure -Of-TypeScript-Language.jpg
 
Step 3. Write the following code in the app.ts file as:
  1. class Students {  
  2.  constructor(public name) {}  
  3.  Position(Div) {  
  4.   alert(this.name + " " + "Position in the class is:" + Div);  
  5.  }  
  6. }  
  7. class Student1 extends Students {  
  8.  constructor(name) {  
  9.   super(name);  
  10.  }  
  11.  Position() {  
  12.   alert("Student1");  
  13.   super.Position(2);  
  14.  }  
  15. }  
  16. class Student2 extends Students {  
  17.  constructor(name) {  
  18.   super(name);  
  19.  }  
  20.  Position() {  
  21.   alert("Student2");  
  22.   super.Position(4);  
  23.  }  
  24. }  
  25. var one = new Student1("Rohan")  
  26. var two: Students = new Student2("Mohan")  
  27. one.Position()  
  28. two.Position(34)  
In this file, I created a class Student that displays the positions of students in a class.
 
Step 4. Write the code in default.htm file as:
  1. <html>  
  2.     <head>  
  3.         <title>Simple Inheritance In TypeScript</title>  
  4.     </head>  
  5.     <body >  
  6.         <h1>Simple Inheritance In TypeScript</h1>  
  7.         <script src="app.js"></script>  
  8.     </body>  
  9. </html>   
Step 5. Now run the application; the output looks like:
 
Single-Inheritance-In-TypeScript.jpg
 
Click OK and the position of the students will be displayed. 
 
Finding-Student-position-In-class-Using-typescript.jpg
 
Student-Information-Using-Typescript.jpg
 
Output-of-student-data-in-typescript.jpg
 
Summary
 
In this article, I explained how to use inheritance in TypeScript with a code example that finds the position of a student in a class.


Similar Articles