ARTICLE
Inheritance Using TypeScript
Today, in this article let’s play around with one of the interesting and most useful concepts in TypeScript.
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:
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:
Step 5: The division result output of the application looks like this:
I hope this article is useful for you.