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.