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:
 
HTM-application-with-TypeScript.jpg
 
Step 2: The complete code of app.ts looks like this:
  1. class Addition {  
  2.  public Add(a: number, b: number): number {  
  3.   return a + b;  
  4.  }  
  5. }  
  6. class Substraction extends Addition {  
  7.  public Sub(a: number, b: number): number {  
  8.   return a - b;  
  9.  }  
  10. }  
  11. class Multiplication extends Substraction {  
  12.  public Mul(a: number, b: number): number {  
  13.   return a * b;  
  14.  }  
  15. }  
  16. class Division extends Multiplication {  
  17.  public Div(a: number, b: number): number {  
  18.   return a / b;  
  19.  }  
  20. }  
  21. var objDivision = new Division();  
  22. alert("Addition Result is: " + objDivision.Add(10, 20));  
  23. alert("Substraction Result is: " + objDivision.Sub(20, 10));  
  24. alert("Multiplication Result is: " + objDivision.Mul(10, 20));  
  25. alert("Division Result is: " + objDivision.Div(10, 20));  
Step 3: The complete code of default.htm looks like this:
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>Inheritance Using TypeScript</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.         <script src="app.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h1 style="text-align: center">  
  12.   
  13.         Inheritance Using TypeScript</h1>  
  14.         <div id="content" />  
  15.     </body>  
  16. </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 to you.