Introduction
Today, in this article let's play around with one of the interesting and most useful concepts in TypeScript.
Question: What is inheritance in TypeScript?
In simple terms "It provides flexibility to perform inheritance using the TypeScript language".
Step 1: Create a new HTML with TypeScript project; see:
![HTM-application-with-TypeScript.jpg]()
Step 2: The complete code of app.ts looks like this:
class Addition
{
public Add(a: number, b: number): number
{
return a + b;
}
}
class Substraction extends Addition
{
public Sub(a: number, b: number):
number
{
return a - b;
}
}
class Multiplication extends Substraction
{
public Mul(a: number, b: number): number
{
return a * b;
}
}
class Division extends Multiplication
{
public Div(a: number, b: number): number
{
return a / b;
}
}
var objDivision = new Division();
alert("Addition Result is: " + objDivision.Add(10, 20));
alert("Substraction Result is: " + objDivision.Sub(20, 10));
alert("Multiplication Result is: " + objDivision.Mul(10, 20));
alert("Division Result is: " + objDivision.Div(10, 20));
Step 3: The complete code of default.htm looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Inheritance Using TypeScript</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h1 style="text-align: center">
Inheritance Using TypeScript</h1>
<div id="content" />
</body>
</html>
Step 4: The addition result output of the application looks like this:
![Arithmetic-TypeScript-App.png]()
Step 5: The division result output of the application looks like this:
![App-Arithmetic-TypeScript.png]()
I hope this article is useful for you.