Post
Ask Question

Arithmetic Operations Using TypeScript

Introduction

 
Today, in this article let's play around with one of the interesting and most useful concepts in TypeScript, arithmetic operations.
 
Question: What are the arithmetic operations using TypeScript?
 
In simple terms "It enables arithmetic operations to be performed using the TypeScript language.".
 
Step 1: Create a new TypeScript project in Visual Studio. 
 
html-application-with-typescript.gif
 
Step 2: The complete code of app.ts looks like this: 
  1. class Arthmetic implements IAddition {  
  2.  public Add(a: number, b: number): number {  
  3.   return a + b;  
  4.  }  
  5.  public Sub(a: number, b: number): number {  
  6.   return a - b;  
  7.  }  
  8.  public Mul(a: number, b: number): number {  
  9.   return a * b;  
  10.  }  
  11.  public Div(a: number, b: number): number {  
  12.   return a / b;  
  13.  }  
  14. }  
  15. interface IAddition {  
  16.  Add(a: number, b: number): number;  
  17.  Sub(a: number, b: number): number;  
  18.  Mul(a: number, b: number): number;  
  19.  Div(a: number, b: number): number;  
  20. }  
  21. function arthemticAdd(arthmetic: Arthmetic) {  
  22.  return "Addition Result of 20 and 10 is: " + arthmetic.Add(20, 10);  
  23. }  
  24. function arthemticSub(arthmetic: Arthmetic) {  
  25.  return "Substraction Result of 20 and 10 is: " + arthmetic.Sub(20, 10);  
  26. }  
  27. function arthemticMul(arthmetic: Arthmetic) {  
  28.  return "Multiplication Result of 20 and 10 is: " + arthmetic.Mul(20, 10);  
  29. }  
  30. function arthemticDiv(arthmetic: Arthmetic) {  
  31.  return "Division Result of 20 and 10 is: " + arthmetic.Div(20, 10);  
  32. }  
  33. var objArthmetic = new Arthmetic();  
  34. alert(arthemticAdd(objArthmetic));  
  35. alert(arthemticSub(objArthmetic));  
  36. alert(arthemticMul(objArthmetic));  
  37. alert(arthemticDiv(objArthmetic));  
  38. }  
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>Arithmetic TypeScript App</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.     </head>  
  9.     <body>  
  10.         <h1 style="text-align: center">    
  11. Arithmetic TypeScript App</h1>  
  12.         <div id="content">  
  13.             <script src="app.js"></script>  
  14.         </div>  
  15.     </body>  
  16. </html>     
Step 4: The addition operation output of the application looks like this: 
 
arithmetic-typescript-app.png
 
Step 5: The subtraction operation output of the application looks like this:
 
arithmetic-typescript-app1.png
 
Step 6: The multiplication operation output of the application looks like this:
 
arithmetic-typescript-app2.png
 
Step 7: The division operation output of the application looks like this:
 
arithmetic-typescript-app3.png
  
I hope this article is useful to you. I look forward to your comments and feedback. Thanks, Vijay Prativadi 


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