TypeScript

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 

Up Next
    Ebook Download
    View all
    Learn
    View all
    MVC Corporation is consulting and IT services based company.
    Membership not found