How To Use Arithmetic Operators in TypeScript

In this article I will explain what arithmetic operators are in TypeScript with an example.

Operators in TypeScript

 
A symbol that represents a specific action. An expression can be as simple as a single value or it can be a series of operations that result in a single value.
 
TypeScript supports the following types of operators:
  • Arithmetic Operators
  • Condition (or Ternary) Operators
  • Assignment Operators
  • Logical (or Relational) Operator

Arithmetic Operators

  • In an arithmetic expression, you can use arithmetic operators to operate on two or more values.
  • An arithmetic expression is evaluated based on the order of precedence of the operators.
  • In an arithmetic expression, to concatenate two or more strings, you can use the + operator.
  • In an arithmetic expression, the plus sign can be used for both numeric and string expressions.
The operators are summarized in the following table:
 
Operator Name Description Example Result
x+y Addition Sum of x and y 3+2 5
x-y Subtraction Difference of x and y 12-2 10
x*y Multiplication Product of x and y 2*10 20
x/y Division Quotient of x and y 30/5 6
x%y Modulus Remainder of x divided by y 7%3 1
-x Negation Opposite of x -9  
x.y Concatenation Concatenate two strings "Csharp"."corner" Csharpcorner
 
Example
The following example shows the arithmetic operations. In this example, I have an Arithmetic class and define an operator function in the class that performs various types of operations. This example shows addition, subtraction, multiplication, division and so on. Let's use the following procedure.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is shown. Give the name of your application as "operator" and then click ok.
 
Step 2
After this session the project has been created; your new project should look like the following. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, and Html files. See:
 
solution-explorer.jpg
 
Coding
 
operator.ts
  1. class Arithmetic  
  2. {  
  3.  operator(a: number, b: number)  
  4.  {  
  5.   Var add: number, sub: number, mul: number, div: number, mod: number, incre: number, dec: number;  
  6.   add = a + b;  
  7.   sub = a - b;  
  8.   mul = a * b;  
  9.   div = a / b;  
  10.   mod = a % b;  
  11.   incre = ++a;  
  12.   dec = --b;  
  13.   var span = document.createElement("span");  
  14.   span.innerText = "\nAddition Of Number is->" + add + "\n" + "Subtraction Of     
  15.   Number is -> "+sub+"\  
  16.   n "+"  
  17.   Multiplication Of Number is -> "+mul+"\  
  18.   n "+"  
  19.   Division  
  20.   Of Number is -> "+div+"\  
  21.   n "+"  
  22.   Modulus Of Number is -> "+mod+"\  
  23.   n "+"  
  24.   Increment Of  
  25.   First Number is -> "+incre+"\  
  26.   n "+"  
  27.   Decrement Of Second Number is -> "+dec;  
  28.   document.body.appendChild(span);  
  29.  }  
  30. }  
  31. window.onload = () =>  
  32.  {  
  33.   var a: number, b: number;  
  34.   a = parseInt(prompt("Enter A First Number"));  
  35.   b = parseInt(prompt("Enter A Second Number"));  
  36.   var greeter = new Arithmetic();  
  37.   var span = document.createElement("span");  
  38.   span.style.color = "green";  
  39.   span.innerText = "First number is->" + a + "\n" + "Second Number is->" + b + "\n";  
  40.   document.body.appendChild(span);  
  41.   greeter.operator(a, b);  
  42.  };  
operatordemo.html
  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > Arithmetic Operator < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  /head>  
  19.  <  
  20.  body >  
  21.  <  
  22.  h2 > Arithmetic Operator In TypeScript < /h2>  
  23.  <  
  24.  divid = "content" / >  
  25.  <  
  26.  /body>  
  27.  <  
  28.  /html>  
app.js
  1. var Arithmetic = (function() {  
  2.  function Arithmetic() {}  
  3.  Arithmetic.prototype.operator = function(a, b) {  
  4.   var add;  
  5.   var sub;  
  6.   var mul;  
  7.   var div;  
  8.   var mod;  
  9.   var incre;  
  10.   var dec;  
  11.   add = a + b;  
  12.   sub = a - b;  
  13.   mul = a * b;  
  14.   div = a / b;  
  15.   mod = a % b;  
  16.   incre = ++a;  
  17.   dec = --b;  
  18.   var span = document.createElement("span");  
  19.   span.innerText = "\nAddition Of Number is->" + add + "\n" + "Subtraction Of Number is->" + sub + "\n" + "Multiplication Of Number is->" + mul + "\n" + "Division Of Number is->" + div + "\n" + "Modulus Of Number is->" + mod + "\n" + "Increment Of First Number is->" + incre + "\n" + "Decrement Of Second Number is->" + dec;  
  20.   document.body.appendChild(span);  
  21.  };  
  22.  return Arithmetic;  
  23. })();  
  24. window.onload = function() {  
  25.  var a;  
  26.  var b;  
  27.  a = parseInt(prompt("Enter A First Number"));  
  28.  b = parseInt(prompt("Enter A Second Number"));  
  29.  var greeter = new Arithmetic();  
  30.  var span = document.createElement("span");  
  31.  span.style.color = "green";  
  32.  span.innerText = "First number is->" + a + "\n" + "Second Number is->" + b + "\n";  
  33.  document.body.appendChild(span);  
  34.  greeter.operator(a, b);  
  35. };  
Output 1
 
first-number.jpg
 
Output 2
 
second-number.jpg
 
Output 3
 
final-result.jpg
 
Referenced By
http://www.typescriptlang.org/