Introduction
Today I am going to explain how to perform inheritance in TypeScript. First of all we need to now what TypeScript is and what is Inheritance. So let's have an overview of these topics.
TypeScript
TypeScript is a Plateform independent language, in other words this language is executed in all browsers because it is JavaScript. TypeScript is a superset of the JavaScript Scripting language. It is compatible with JavaScript because the generated code is JavaScript; that means we can write the Simple Inhertance 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.
Inheritance
Inheritance is the process by which we can acquire the feature of the another class. There is a Base class and the derived class, the derived class can access the features of the base class. Inhertitance 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...". A window is shown as:
![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:
class Students {
constructor (public name) { }
Position(Div) {
alert(this.name + " " + "Position in the class is:" + Div);
}
}
class Student1 extends Students {
constructor (name) { super(name); }
Position() {
alert("Student1");
super.Position(2);
}
}
class Student2 extends Students {
constructor (name) { super(name); }
Position() {
alert("Student2");
super.Position(4);
}
}
var one = new Student1("Rohan")
var two: Students = new Student2("Mohan")
one.Position()
two.Position(34)
In this file I make a class Student and display the positions of the students in the class.
If you want to run this sample and generate the JavaScript file click here.
Step 4
Write the code in default.htm file as:
<html>
<head>
<title>Simple Inheritance In TypeScript</title>
</head>
<body >
<h1>Simple Inheritance In TypeScript</h1>
<script src="app.js"></script>
</body>
</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 as an example of finding the position of a student in the class.