In TypeScript, the if statement evaluates a condition (a boolean expression) and executes a block of code only if the condition is true. The condition is evaluated before the block of code block is executed.

If the condition is false, the code block following the else (if present) is executed. We will discuss the if…else statement in more detail in the next chapter.

Syntax

To write an if statement syntax, we use the if keyword followed by a condition in parentheses and then a block of code enclosed in curly braces ({}).

if(boolean_expression) {
   // statement(s) will execute if the boolean expression is true  
} 

If the Boolean expression evaluates to true, then the block of code inside the if statement will be executed. If the Boolean expression evaluates to false, then the first set of code after the end of the if statement (after the closing curly brace) will be executed.

Flowchart

The following flow chart shows how the if statement works.

Examples

Let”s understand the if statement in details with the help of some examples in TypeScript.

Example 1

In the example below, we define a variable num of number type and assign it the value 5. Since the condition evaluates to true and the code of the if statement is executed.

var  num: number = 5
if (num > 0) { 
   console.log("number is positive") 
}

On compiling, it will generate following JavaScript code.

var num = 5;
if (num > 0) {
   console.log("number is positive");
}

The above example will print “number is positive” as the condition specified by the if block is true.

number is positive

Example 2

In the example below, the condition is a boolean variable isQualified. If isQualified is true, the if statement executes the block of code following it.

var isQualified: boolean = true;
if( isQualified ) {
    console.log("Qualified for driving");
}

On compiling, it will generate the following JavaScript code.

var isQualified = true;
if( isQualified ) {
    console.log("Qualified for driving");
}

The above example will print “Qualified for driving” as the condition specified by the if block is true.

Qualified for driving

Example 3

In the example below, we define variables x, and y of number type and assign values 20 & 30 to them. The condition of the if statement is x < y. With these given values, the condition evaluates to true, so the code within the if statement is executed.

var x: number = 20;
var y: number = 30;
if (x < y){
    console.log("x is less than y");
}

On compiling, it will produce the following JavaScript code.

var x = 20;
var y = 30;
if (x < y){
    console.log("x is less than y");
}

The above example will print “x is less than y” as the condition (20 < 30) specified by the if statement is true.

x is less than y

Example 4: When condition is false

var x: number = 100;
var count: number = 0;
if (x < 100){
    count++;
}
console.log(count);

On compiling, it will produce the following JavaScript code.

var x = 100;
var count = 0;
if (x < 100){
    count++;
}
console.log(count);

Since the condition (x < 100) evaluates to false, the if block will not be executed. The value of count will remain same as previous. The output is as follows –

0