TypeScript switch Statement

Introduction

In this chapter, we will explore the switch statement in TypeScript. The switch statement allows you to execute different blocks of code based on the value of an expression. Understanding how to use the switch statement is essential for managing multiple conditions in a more readable and organized way compared to multiple if-else statements.

Table of Contents

• Definition
• Switch Statement Syntax
• Using the Switch Statement
• Fall-Through Behavior
• Using Default Case
• Complete Example with Output
• Conclusion

Definition

The switch statement evaluates an expression and executes code based on the matching case. If no matching case is found, an optional default case can be executed.

Switch Statement Syntax

Syntax

switch (expression) {
  case value1:
    // code to be executed if expression === value1
    break;
  case value2:
    // code to be executed if expression === value2
    break;
  // more cases...
  default:
    // code to be executed if expression doesn't match any case
}

Example

This example uses a switch statement to determine the name of the day based on the value of day.

let day: number = 3;
let dayName: string;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Unknown";
}

console.log(dayName); // Output: Wednesday

Output

Wednesday

Using the Switch Statement

The switch statement is useful for managing multiple conditions in a more readable way than multiple if-else statements.

Example

This example uses a switch statement to classify a person's age group.

let age: number = 25;
let ageGroup: string;

switch (true) {
  case (age >= 0 && age <= 12):
    ageGroup = "Child";
    break;
  case (age >= 13 && age <= 19):
    ageGroup = "Teenager";
    break;
  case (age >= 20 && age <= 64):
    ageGroup = "Adult";
    break;
  case (age >= 65):
    ageGroup = "Senior";
    break;
  default:
    ageGroup = "Unknown";
}

console.log(ageGroup); // Output: Adult

Output

Adult

Fall-Through Behavior

In TypeScript, case statements in a switch statement fall through by default if there is no break statement. This means that if a matching case is found, it will continue executing the subsequent cases until a break is encountered.

Example

This example demonstrates the fall-through behavior of the switch statement.

let grade: string = 'B';
let result: string;

switch (grade) {
  case 'A':
    result = "Excellent";
    break;
  case 'B':
  case 'C':
    result = "Good";
    break;
  case 'D':
    result = "Fair";
    break;
  case 'F':
    result = "Fail";
    break;
  default:
    result = "Unknown";
}

console.log(result); // Output: Good

Output

Good

Using Default Case

The default case in a switch statement executes if no matching case is found. It is optional but useful for handling unexpected values.

Example

This example uses a default case to handle unexpected values.

let color: string = 'purple';
let message: string;

switch (color) {
  case 'red':
    message = "Color is Red";
    break;
  case 'green':
    message = "Color is Green";
    break;
  case 'blue':
    message = "Color is Blue";
    break;
  default:
    message = "Color not recognized";
}

console.log(message); // Output: Color not recognized

Output

Color not recognized

Complete Example with Output

In this section, we will combine all the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground:

// Switch Statement
let day: number = 3;
let dayName: string;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Unknown";
}

console.log(dayName); // Output: Wednesday

// Using Switch Statement
let age: number = 25;
let ageGroup: string;

switch (true) {
  case (age >= 0 && age <= 12):
    ageGroup = "Child";
    break;
  case (age >= 13 && age <= 19):
    ageGroup = "Teenager";
    break;
  case (age >= 20 && age <= 64):
    ageGroup = "Adult";
    break;
  case (age >= 65):
    ageGroup = "Senior";
    break;
  default:
    ageGroup = "Unknown";
}

console.log(ageGroup); // Output: Adult

// Fall-Through Behavior
let grade: string = 'B';
let result: string;

switch (grade) {
  case 'A':
    result = "Excellent";
    break;
  case 'B':
  case 'C':
    result = "Good";
    break;
  case 'D':
    result = "Fair";
    break;
  case 'F':
    result = "Fail";
    break;
  default:
    result = "Unknown";
}

console.log(result); // Output: Good

// Using Default Case
let color: string = 'purple';
let message: string;

switch (color) {
  case 'red':
    message = "Color is Red";
    break;
  case 'green':
    message = "Color is Green";
    break;
  case 'blue':
    message = "Color is Blue";
    break;
  default:
    message = "Color not recognized";
}

console.log(message); // Output: Color not recognized

Conclusion

In this chapter, we covered the switch statement in TypeScript, including how to use it to execute different blocks of code based on the value of an expression, manage fall-through behavior, and handle unexpected values with the default case. We provided a complete example with its output to illustrate how the switch statement works in TypeScript. Understanding the switch statement is essential for managing multiple conditions in a more readable and organized way.