TypeScript Operators Tutorial

In this TypeScript tutorial we learn the standard arithmetic, assignment, comparison (relational) and logical (conditional) operators.

We also discuss the negation, concatenation, typeof and ternary operators as well as operator precedence in TypeScript.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

What are operators

Operators are one or more symbols in TypeScript that is special to the compiler and allows us to perform various operations within our application.

As an example, let’s consider the + symbol. The + symbol is an operator to perform arithmetic on two or more numeric values. But, when used on two or more strings, the + operator will combine (concatenate) them into a single string.

Example:
// addition
console.log(5 + 3);

// concatenation
console.log("Hello " + "World");

Types in TypeScript fall under the following categories:

  • Arithmetic
  • Assignment
  • Bitwise
  • Comparison (Relational)
  • Logical (Conditional)
  • Other
    • Negation
    • Concatenation
    • Type Of
    • Ternary

Arithmetic operators

TypeScript supports the following the arithmetic operators.

OperatorDescriptionExample
+Adds operands5 + 3 = 8
-Subtract the second operand from the first5 - 3 = 2
*Multiplies the first operand with the second5 * 3 = 15
/Divide the first operand with the second5 / 3 = 1
%Modulus. Returns the remainder of a division5 % 3 = 2
++Increment. Increase an interger value by one5++ = 6
--Decrement. Decrease an integer value by one5-- = 4

Assignment operators

TypeScript supports the following assignment operators.

OperatorDescription
=Assignment. Assign right operand to the left operand
+=Add and assign. Add the right operand to the left operand and assign the result to the left operand
-=Subtract and assign. Subtract the right operand from the left operand and assign the result to the left operand
*=Multiply and assign. Multiply the left operand with the right operand and assign the result to the left operand
/=Divide and assign. Divide the left operand with the right operand and assign the result to the left operand
%=Modulus and assign. Divide the left operand with the right operand and assign the remainder to the left operand
Example:
// =
var num1 : number = 5;
var num2 = 3;
console.log("num1:", num1);

// +=
num1 += num2;
console.log("num1 += num2:", num1);

// -=
num1 -= num2;
console.log("num1 -= num2:", num1);

// *=
num1 *= num2;
console.log("num1 *= num2:", num1);

// /=
num1 /= num2;

console.log("num1 /= num2:", num1);

// %=
num1 %= num2;
console.log("num1 %= num2:", num1);

Comparison (Relational) operators

TypeScript supports the following comparison operators.

OperatorDescription
==Evaluates if the values of two operands are equal
!=Evaluates if the values of two operands are not equal
>Evaluates if the value of the left operand is greater than the value of the right operand
<Evaluates if the value of the left operand is less than the value of the right operand
>=Evaluates if the value of the left operand is greater than or equal to the value of the right operand
<=Evaluates if the value of the left operand is less than or equal to the value of the right operand
Example:
var result : boolean;

// ==
result = 1 == 1;
console.log("1 == 1:", result);

// !=
result = 1 != 1;
console.log("1 != 2:", result);

// >
result = 1 > 2;
console.log("1 > 2:", result);

// <
result = 1 < 2;
console.log("1 < 2:", result);

// >=
result = 1 >= 1;
console.log("1 >= 1:", result);

// <=
result = 2 <= 1;
console.log("2 <= 1:", result);

Logical (Conditional) operators

TypeScript supports the following comparison operators.

OperatorNameDescription
&&Conditional AND operatorIf both operands are non-zero, the result is true
||Conditional OR operatorIf one of the two operands is non-zero, the result is true
!Conditional NOT operatorIf the condition is not true, the result becomes true
Example:
var op1 : boolean = true;
var op2 : boolean = false;

// &&
console.log("op1 AND op2 = true:", op1 && op2);

// ||
console.log("op1 OR op2 = true:", op1 || op2);

// !
console.log("op1 = NOT true:", !op1);

// !
console.log("op2 = NOT true:", !op2);

Other: The negation operator

Typically, if we want to to turn a positive number into a negative number, we would have to multiply that number by -1.

Example:
// positive number
var num : number = 5;
console.log(num);

// multiply by -1 to turn
// the number negative
console.log(num * -1);

The negation operator can turn a number negative simply be prefixing it with the - operator.

Example:
// positive number
var num : number = 5;
console.log(num);

// prefix number with
// negation operator ( - )
console.log(-num);

Other: The concatenation operator

When working with arithmetic, the + operator will perform an addition. But, when working with strings, the + operator will combine (concatenate) the strings together.

Example:
var msg1 : string = "Hello";
var msg2 : string = " there";

// concatenate the strings
// with the + operator
console.log(msg1 + msg2);

Other: The typeof operator

The typeof operator will get and return the data type of the operand we specify.

The typeof operator is simply the keyword typeof .

Example:
var a = 5;
var b = 1.1;
var c = false;
var d = "Hello";

// typeof keyword returns
// the data type
console.log("a (", a, ") type: ", typeof a);
console.log("b (", b, ") type: ", typeof b);
console.log("c (", c, ") type: ", typeof c);
console.log("d (", d, ") type: ", typeof d);

Other: The ternary operator

The ternary operator is a shorthand method of writing a if/else statement that only contains a single execution statement.

If this doesn’t make sense at the moment, don’t worry, we cover the ternary statement again the tutorial lesson on conditional control statementsOpens up in a new page .

Let’s consider the following if else statement.

Example:
var num : number = 8;

if (num == 10) {

  console.log("num == 10");
} else {

  console.log("num != 10");
}

In the example above, we evaluate if a number is 10 or not and print a message to the console. Let’s convert this into shorthand with the ternary operator.

Example:
var num : number = 8;

// condition    if true statement             if false statement
(num == 10)  ?  console.log("num == 10") : console.log("num != 10");

Operator precedence

Certain operators in TypeScript will have higher precedence than others.

As an example, let’s consider the precedence of the multiplication and addition operators.

Example:
 5 + 3 * 2

If we read the calculation from left to right, we would do the addition first. But, the multiplication operator has a higher precedence than the addition operator, so it will do that part of the calculation first.

Example:
// correct
3 * 2 = 6
5 + 6 = 11

// incorrect
5 + 3 = 8
8 * 2 = 16

We can change the operator precedence by wrapping operators in parentheses.

Example:
 (5 + 3) * 2

In the example above, we want the addition to be performed before the multiplication, so we wrap the addition in parentheses.

Example:
(5 + 3) = 8
8 * 2 = 16

Summary: Points to remember

  • Operators are symbols that have a special meaning to the compiler.
  • TypeScript supports the typical arithmetic, assignment, comparison (relational) and logical (conditional) operators.
  • Typescript also supports the negation, concatenation, typeof and ternary operators.
  • Some operators have greater importance than others and we change operator precedence with parentheses.