By Arjun Rao | 6/24/2019 | General |Beginners

Operators in TypeScript

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

TypeScript Operator

TypeScript Operator Description

E.G.

+ (Addition)

Returns the sum of the operands

x + y is 25

- (Subtraction)

Returns the difference of the operands

y - x is 15

* (Multiplication)

Returns the product of the operands

x * y is 100

/ (Division)

Performs division and returns the quotient of the operands

y / x is 4

% (Modulus)

Performs division and returns the remainder of the operands

y % x is 0

++ (Increment)

Increments the value of a variable by one

x++ is 6

-- (Decrement)

Decrements the value of a variable by one

y-- is 19


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

TypeScript Operator

TypeScript Operator Description

E.G.

= (Simple Assignment)

Assigns the value of the right operand to the left operand

Z = X + Y will assign the value of X + Y into Z

+= (Add & Assignment)

Adds the right operand to the left operand & assigns the result to the left operand

Z += X is equivalent to Z = Z + X

-= (Subtract & Assignment)

Subtracts the right operand from the left operand & assigns the result to the left operand

Z -= X is equivalent to Z = Z - X

*= (Multiply & Assignment)

Multiplies the right operand by the left & assigns the result to the left operand

Z *= X is equivalent to Z = Z * X

/= (Divide & Assignment)

Divides the left operand by the right & assigns the result to the left operand

 

 

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

TypeScript Operator

TypeScript Operator Description

E.G.

& (Bitwise AND)

Performs a Boolean AND operation on each bit of its integer arguments.

(X & Y) is 2

| (BitWise OR)

Performs a Boolean OR operation on each bit of its integer arguments.

(X | Y) is 3

^ (Bitwise XOR)

Performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.

(X ^ Y) is 1

~ (Bitwise Not)

A unary operator that operates by reversing all the bits in the operand.

(~Y) is -4

<< (Left Shift)

Moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.

(X << 1) is 4

>> (Right Shift)

Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand.

(X >> 1) is 1

>>> (Right shift with Zero)

This operator is just like the >> operator, except that the bits shifted on the left are always zero.

(X >>> 1) is 1

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

TypeScript Operator

TypeScript Operator Description

E.G.

&& (And)

The operator returns true only when all the expressions specified are true

(X > 10 && Y > 10) is False

|| (OR)

The operator returns true if at least one of the expressions specified is true

(X > 10 || Y >10) is True

! (NOT)

The operator returns the inverse of the expression’s result. E.g.: !(>5) returns false

!(X >10 ) is True

 

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

TypeScript Operator

TypeScript Operator Description

E.G.

>

Greater than

(A > B) is False

<

Lesser than

(A < B) is True

>=

Greater than or equal to

(A >= B) is False

<=

Lesser than or equal to

(A <= B) is True

==

Equality

(A == B) is false

!=

Not equal

(A != B) is True

 

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.

 

Previous article: TypeScript Types & Variables

Next article: coming soon!

By Arjun Rao | 6/24/2019 | General

{{CommentsModel.TotalCount}} Comments

Your Comment

{{CommentsModel.Message}}

Recent Stories

Top DiscoverSDK Experts

User photo
3355
Ashton Torrence
Web and Windows developer
GUI | Web and 11 more
View Profile
User photo
3220
Mendy Bennett
Experienced with Ad network & Ad servers.
Mobile | Ad Networks and 1 more
View Profile
User photo
3060
Karen Fitzgerald
7 years in Cross-Platform development.
Mobile | Cross Platform Frameworks
View Profile
Show All
X

Compare Products

Select up to three two products to compare by clicking on the compare icon () of each product.

{{compareToolModel.Error}}

Now comparing:

{{product.ProductName | createSubstring:25}} X
Compare Now