Post
Ask Question

Inheritance Using 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. 


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.