TypeScript Conditional Statements
Conditional statements are used to perform different actions based on different conditions.
TypeScript conditional statements are determined by the execution result (True or False) of one or more statements.
You can understand the execution process of conditional statements through the following diagram:
Conditional Statements
When writing code, you often need to perform different actions based on different decisions. You can use conditional statements in your code to accomplish this task.
In TypeScript, we can use the following conditional statements:
- if statement - Executes code only if the specified condition is true
- if...else statement - Executes code if the condition is true and other code if the condition is false
- if...else if....else statement - Selects one of multiple code blocks to execute
- switch statement - Selects one of multiple code blocks to execute
if Statement
A TypeScript if statement consists of a boolean expression followed by one or more statements.
Syntax
The syntax is as follows:
if(boolean_expression){
// Execute if boolean_expression is true
}
If the boolean expression boolean_expression is true, the code block inside the if statement will be executed. If the boolean expression is false, the first set of code after the if statement (after the closing bracket) will be executed.
Flowchart
Example
var num:number = 5;
if (num > 0) {
console.log("The number is positive");
}
Compiling the above code results in the following JavaScript code:
var num = 5;
if (num > 0) {
console.log("The number is positive");
}
Executing the above JavaScript code outputs:
The number is positive
if...else Statement
An if statement can be followed by an optional else statement, which executes when the boolean expression is false.
Syntax
The syntax is as follows:
if(boolean_expression){
// Execute if boolean_expression is true
}else{
// Execute if boolean_expression is false
}
If the boolean expression boolean_expression is true, the code inside the if block will be executed. If the boolean expression is false, the code inside the else block will be executed.
Flowchart
Example
var num:number = 12;
if (num % 2==0) {
console.log("Even");
} else {
console.log("Odd");
}
Compiling the above code results in the following JavaScript code:
var num = 12;
if (num % 2 == 0) {
console.log("Even");
}
else {
console.log("Odd");
}
Executing the above JavaScript code outputs:
Even
if...else if....else Statement
The if...else if....else statement is useful for executing multiple conditional checks.
Syntax
The syntax is as follows:
if(boolean_expression 1) {
// Execute if boolean_expression 1 is true
} else if( boolean_expression 2) {
// Execute if boolean_expression 2 is true
} else if( boolean_expression 3) {
// Execute if boolean_expression 3 is true
} else {
// Execute if all boolean expressions are false
}
Note the following:
- An if statement can have 0 or 1 else statement and it must come after any else if statements.
- An if statement can have 0 or more else if statements and they must come before the else statement.
- Once an else if block is executed, any subsequent else if or else blocks will not be executed.
Example
var num:number = 2
if(num > 0) {
console.log(num+" is positive");
} else if(num < 0) {
console.log(num+" is negative");
} else {
console.log(num+" is neither positive nor negative");
}
Compiling the above code results in the following JavaScript code:
var num = 2;
if (num > 0) {
console.log(num + " is positive");
}
else if (num < 0) {
console.log(num + " is negative");
}
else {
console.log(num + " is neither positive nor negative");
}
Executing the above JavaScript code outputs:
2 is positive
switch…case Statement
A switch statement allows testing a variable against multiple values. Each value is called a case, and the variable being tested is checked against each switch case.
The syntax for a switch statement is:
switch(expression){
case constant-expression :
statement(s);
break; // Optional
case constant-expression :
statement(s);
break; // Optional
// You can have any number of case statements
default : // Optional
statement(s);
}
switch statements must follow these rules:
- The expression in a switch statement must be a constant expression and must be an integer or enumeration type.
- A switch can have any number of case statements. Each case is followed by a value to compare and a colon.
- The constant-expression in a case must be the same data type as the variable in the switch and must be a constant or literal.
- When the variable being tested equals the constant in a case, the statements following that case will be executed until a break statement is encountered.
- When a break statement is encountered, the switch terminates, and the control flow jumps to the next line after the switch statement.
- Not every case needs to contain a break. If a case does not contain a break, the control flow will continue to the subsequent cases until a break is encountered.
- A switch statement can have an optional default case, which must appear at the end of the switch. The default case can be used to perform a task when none of the cases are true. The break statement is not required in the default case.
Flowchart
Example
var grade:string = "A";
switch(grade) {
case "A": {
console.log("Excellent");
break;
}
case "B": {
console.log("Good");
break;
}
case "C": {
console.log("Pass");
break;
}
case "D": {
console.log("Fail");
break;
}
default: {
console.log("Invalid input");
break;
}
}
Compiling the above code results in the following JavaScript code:
var grade = "A";
switch (grade) {
case "A": {
console.log("Excellent");
break;
}
case "B": {
console.log("Good");
break;
}
case "C": {
console.log("Pass");
break;
}
case "D": {
console.log("Fail");
break;
}
default: {
console.log("Invalid input");
break;
}
}
Executing the above JavaScript code outputs:
Excellent