TypeScript Operators Tutorial

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.

// 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.

Assignment operators

TypeScript supports the following assignment operators.

// =
let num1: number = 5
let 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.

let 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.

let op1 : boolean = true
let 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.

// 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.

// 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.

let msg1 : string = "Hello"
let 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 .

let a = 5
let b = 1.1
let c = false
let 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.

note If this doesn’t make sense at the moment, don’t worry, we cover the ternary statement again the tutorial lesson on conditional control statements .

Let’s consider the following if else statement.

let 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.

let 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.

 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.

// 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.

 (5 + 3) * 2

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

(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.