Operators in TypeScript

Today we’re going to look at operators in TypeScript. But before we get into it, let’s set the stage with a bit of vocabulary—it won’t take long. Take for example the following expression:

5 x 20 = 100

This typescript expression consists of operators and operands. So…

Operators perform some kind of, well, operation! And they perform that operation on operands. This means that in the expression above ‘x’ and ‘=’ are operators and ‘5’, ‘20’, and ‘100’ are operands. Easy, right?

Here’s a quick list of the essential types of operators in TypeScript:

• Arithmetic operators
• Assignment operators
• Bitwise operators
• Logical operators
• Relational operators
• String operators
• Ternary/conditional operators
• Type Operators

You’re probably familiar with some or all of these, but let’s examine them in more detail and throw in some examples along the way. Feel free to bookmark this page as a reference!

Arithmetic Operators in TypeScript

For the following chart, let x = 5 and y = 20

Arithmetic Operator Examples in TypeScript

TypeScript Code:

var num1:number = 20
var num2:number = 5
var res:number = 0
res = num1 + num2
console.log("Sum: "+res);

res = num1 - num2;
console.log("Difference: "+res)

res = num1*num2
console.log("Product:"+res)

res = num1/num2
console.log("Quotient: "+res)
res = num1%num2
console.log("Remainder: "+res)

num1++
console.log("The value of num1 after increment is "+num1)

num2--
console.log("The value of num2 after decrement is "+num2)

Compiled JavaScript:

var num1 = 20;
var num2 = 5;
var res = 0;
res = num1 + num2;
console.log("Sum: " + res);
res = num1 - num2;
console.log("Difference: " + res);
res = num1 * num2;
console.log("Product:" + res);
res = num1 / num2;
console.log("Quotient: " + res);
res = num1 % num2;
console.log("Remainder: " + res);
num1++;
console.log("The value of num1 after increment is " + num1);
num2--;
console.log("The value of num2 after decrement is " + num2);

Console Results:

Sum: 25

Difference: 15

Product:100

Quotient: 4

Remainder: 0

The value of num1 after increment is 21

The value of num2 after decrement is 4

Assignment Operators in TypeScript

Assignment Operator Examples in TypeScript

var x:number = 20
var y:number = 5

x = y
console.log("x = y: "+x)

x += y
console.log("x+=y: "+x)

x -= y
console.log("x-=y: "+x)

x *= y
console.log("x*=y: "+x)

x /= y
console.log("x/=y: "+x)    

x %= y
console.log("x%=b: "+x)

Compiled JavaScript: 

var x = 20;
var y = 5;

x = y;
console.log("x = y: " + x);

x += y;
console.log("x+=y: " + x);

x -= y;
console.log("x-=y: " + x);

x *= y;
console.log("x*=y: " + x);

x /= y;
console.log("x/=y: " + x);

x %= y;
console.log("x%=b: " + x);

Console Results:

x = y: 5

6 x+=y: 10

8 x-=y: 5

10 x*=y: 25

12 x/=y: 5

14 x%=b: 0

Bitwise Operators in TypeScript

For the following chart, let X = 2 and Y = 3

Bitwise Operator Examples in TypeScript

var a:number = 20;
var b:number = 5;
var result;
    
result = (a & b);     
console.log("(a & b) => ",result)
         
result = (a | b);          
console.log("(a | b) => ",result)  
      
result = (a ^ b);  
console.log("(a ^ b) => ",result);
result = (~b);
console.log("(~b) => ",result);

result = (a << b);
console.log("(a << b) => ",result);

result = (a >> b);
console.log("(a >> b) => ",result);

Compiled JavaScript:

var a = 20;
var b = 5;
var result;

result = (a & b);
console.log("(a & b) => ", result);
result = (a | b);
console.log("(a | b) => ", result);
result = (a ^ b);
console.log("(a ^ b) => ", result);
result = (~b);
console.log("(~b) => ", result);
result = (a << b);
console.log("(a << b) => ", result);
result = (a >> b);
console.log("(a >> b) => ", result);

Console Results:

(a & b) =>  4

(a | b) =>  21

(a ^ b) =>  17

(~b) =>  -6

(a << b) =>  640

(a >> b) =>  0

Logical Operators in TypeScript

For the following chart, let X = 10 and Y = 20

Logical Operator Examples in TypeScript:

var avg:number = 25;
var percentage:number = 96;

console.log("Value of avg: "+avg+" ,value of percentage: "+percentage);
var res:boolean = ((avg>50)&&(percentage>80));
console.log("(avg>50)&&(percentage>80): ",res);

var res:boolean = ((avg>50)||(percentage>80));
console.log("(avg>50)||(percentage>80): ",res);

var res:boolean=!((avg>50)&&(percentage>80));
console.log("!((avg>50)&&(percentage>80)): ",res);

Compiled JavaScript:

var avg = 25;
var percentage = 96;

console.log("Value of avg: " + avg + " ,value of percentage: " + percentage);
var res = ((avg > 50) && (percentage > 80));
console.log("(avg>50)&&(percentage>80): ", res);
var res = ((avg > 50) || (percentage > 80));
console.log("(avg>50)||(percentage>80): ", res);
var res = !((avg > 50) && (percentage > 80));
console.log("!((avg>50)&&(percentage>80)): ", res);

Console Results:

Value of avg: 25 ,value of percentage: 96
(avg>50)&&(percentage>80):  false
(avg>50)||(percentage>80):  true
!((avg>50)&&(percentage>80)):  true

Relational Operators in TypeScript

“A relational operator is a programming language construct or operator that tests or defines some kind of relation between two entities.” (Wiki) Relational operators in TypeScript return a Boolean value—true or false.

In the following chart, let A = 5 and B = 20

Relational Operator Examples in TypeScript:

var num1:number = 5;
var num2:number = 20;

console.log("The value of num1: "+num1);
console.log("The value of num2 :"+num2);
var res = num1>num2
console.log("num1 is greater than num2: "+res)

res = num1<num2
console.log("num1 lesser than num2: "+res)  

res = num1>=num2
console.log("num1 is greater than or equal to  num2: "+res)

res = num1<=num2
console.log("num1 is less than or equal to num2: "+res)

res = num1==num2
console.log("num1 is equal to num2: "+res)  

res = num1!=num2  
console.log("num1 is not equal to num2: "+res)

Compiled JavaScript:

var num1 = 5;
var num2 = 20;

console.log("The value of num1: " + num1);
console.log("The value of num2 :" + num2);
var res = num1 > num2;
console.log("num1 is greater than num2: " + res);
res = num1 < num2;
console.log("num1 lesser than num2: " + res);
res = num1 >= num2;
console.log("num1 is greater than or equal to  num2: " + res);
res = num1 <= num2;
console.log("num1 is less than or equal to num2: " + res);
res = num1 == num2;
console.log("num1 is equal to num2: " + res);
res = num1 != num2;
console.log("num1 is not equal to num2: " + res);

Console Results:

The value of num1: 5

The value of num2 :20

num1 is greater than num2: false

num1 lesser than num2: true

num1 is greater than or equal to  num2: false

num1 is less than or equal to num2: true

num1 is equal to num2: false

num1 is not equal to num2: true

String Operators in TypeScript: The Concatenation Operator

When we apply the + operator to a string, it appends or concatenates the second part to the first.

Concatenation Operator Example in TypeScript 

var msg:string = "Hello"+"World"

console.log(msg)

Compiled JavaScript:

var msg = "Hello" + "World";

console.log(msg);

Console Results:

HelloWorld

*Note that it is possible to concatenate multiple strings together in a single statement.

The Conditional Operator in TypeScript

The conditional ? operator, aka the ternary operator, is used for testing a conditional expression. Here is the syntax for this TypeScript operator:

Test ? expression1 : expression2

• Test — this is the conditional expression
• expression1 — this is the value returned when the condition is true
• expression2 — this is the value returned when the condition is false

Conditional Operator Example in TypeScript

var num:number = -2
var result = num > 0 ?"positive":"non-positive"
console.log(result)

Compiled JavaScript:

var num = -20;
var result = num > 0 ? "positive" : "negative";
console.log(result);

Console Results:

Negative

Type Operators in TypeScript

The typeof Operator

The typeof operator in TypeScript is a unary operator and returns the data type of the operand.

typeof Operator Example in TypeScript

var num = 5
console.log(typeof num);   //output: number

Compiled JavaScript:

var num = 5;
console.log(typeof num); //output: number

Compiler Results:

number

That’s all for this time. Hope you find this to be a valuable resource. Join us next time when we’ll have a look at loops in TypeScript.