TypeScript Switch Statement

The TypeScript switch statement executes one block of code for multiple conditions. We evaluate an expression based on its value which can be a number, string, boolean, enum or union type. A switch statement has one block of code corresponding to each value. When the match is found, the corresponding block will be executed. A switch statement works like the if-else-if ladder statement.

The following points must be remembered in a switch statement:

• There can be N number of cases inside a switch statement.
• The case values must be unique.
• The case values must be constant.
• Each case statement has a break statement at the end of the code. The break statement is optional.
• The switch statement has a default block which is written at the end. The default statement block is optional.

Syntax

The switch statement contains the following things. There can be any number of cases inside a switch statement.

Case: A case should be followed by only one constant value and then a colon. It cannot accept another variable or expression.

Break: The break should be written at the end of the block to come out from the switch statement after executing a case block. If we do not write break, the execution continues with the matching value to the subsequent case block.

Default: The default block should be written at the end of the switch statement. It executes when there are no case will be matched.

Example:

Let us see an example to understand this code.

Code:

Output:

None of the above cases have been matched

Explanation:

In this example, we utilized the switch statement to evaluate an expression and execute code based on its value. We declared two variables named a and b using the let keyword. The type of both variables is a number. We assigned 3 to variable a and 2 to variable b.

Here, the expression a + b is defined to add two numbers which results in 5 and this value is passed to the switch statement. Each case compares its value against the evaluated expression (a+b).

Using String Literals in Switch Case Statements

In TypeScript, we can easily use string literals in a switch statement. We provide a variable or expression in the switch() condition and then list the potential string values as case conditions.

Code:

Output:

The color is red.

Switch case with enum

An enum is a great choice when we need to define a set of named values which makes the switch statement more maintainable. In TypeScript, we can use the switch case with an enum in the following ways.

Example:

Let's understand this with the help of an example.

Code:

Output:

You are in the North Direction

Explanation:

Here, we declare a variable named dir which is initialized with the enum value Direction.North. Here, we used a switch statement that compares the value of dir with the enum members Direction.East, Direction.West, Direction.North and Direction.East. As we have given the value of dir is Direction.North, therefore, the matching case Direction.North runs and the message "You are in the North direction" is printed on the console.

Handling Fall-Through in Switch Statements

In a switch statement, Fall-through takes place when we do not define a break or return statement inside a case. This causes execution to fall through to the next case. Sometimes developers do it deliberately but it generally indicates a bug.

Example:

Let's have an example to illustrate this.

Code:

Output:

10
20
30
Not in 10, 20 or 30

Explanation:

In this example, we declare a variable named number and assign it a value of 20. The switch statement compares the value of the number with the cases 10, 20 and 30. Here, the value of the number is 20 so the case 20 is executed first and prints 20 on the console but we have not defined a break or return statement, therefore, the execution falls through to the next case. Therefore, case 30 runs next and prints 30 and the default case also runs and prints Not in 10, 20 or 30.

Accidentally Fall-Through in a Switch Statement

Sometimes we accidentally forget to define a break or return statement in TypeScript which is one of the most frequent switch-related bugs.

Example:

Let's understand this with an example.

Code:

Output:

10
20

In the above example, a variable is declared and assigned a value of 10. The switch statement compares the value of the number with the cases 10, 20 and 30. Here, the value of the number is 10, so case 10 is executed first and prints 10 on the console. After the first case, there is no break statement so the execution falls through to the next case. Therefore, case 20 is executed next and prints 20 on the console. After case 20, we used a break statement which stops further execution of the switch statement.

Conclusion:

In TypeScript, we can easily and effectively use a switch statement to execute different code blocks based on different values. It helps us to make our code cleaner and more readable. A developer can control program flow efficiently by using proper case, break and default statements and being careful about fall-through. In this article, we have covered the TypeScript switch statement with different types of examples.