Switch Statement in Typescript

The Typescript switch statement (or switch case statement) evaluates a given expression. It then matches the result of that expression with the values in the case clause. If it finds a match, then it executes the statements associated with that matching case clause. It also executes the statements in case‘s that follow the matching case. You can break out of a switch using the break statement or using the return statement

Switch Case Syntax

The Syntax of the Switch Statement in Typescript is as follows.

The switch statement starts with keyword switch and expression in parentheses. The Typescript evaluates the expression (switch expression) and compares it with values in the case clause.

We follow switch expression with curly braces with one or more case clauses and an optional default clause.

Each case clause must have a value terminated by a colon. The default clause must not have a value. Within the individual case clause, we may write several statements

How it works

First, the switch expression evaluates its expression.

It then starts to compare the result of the expression with each case value.

When it finds a match, the switch statement then executes the statements starting from the code associated with the case clause that matches. It continues to execute the statements until it reaches

1. end of the switch or
2. it encounters a break statement or
3. it encounters a return statement

Only the first match is considered, even if there is more than one match.

If none of the case values matches with the expression result, then it will start to execute the statements starting from the code associated with the default clause.

By convention, the default clause is the last clause, but it does not need to be so.

Switch Examples

Using Switch

In the following example, the expression operation matches the case clause -. Hence the switch executes the code associated with that case clause. When it encounters the break, it breaks out of the switch.

Without break

If we omit the break the execution of the statements continues till it reaches the end of the switch.

In the following example, we remove all the break statements. Here the execution starts from the - operator but does not end in that case clause. The execution continues to * ,/ & even to the default clause.

The execution of statements continues until it finds one of the following

1. end of the switch
2. break statement
3. return statement

Default Clause

In this example, the expression does not match any case clause. Hence the switch executes the default clause.

Default Clause Location

Ideally and for better readability, the default clause must be placed last. Nonetheless, even if you position it anywhere in the switch it will still work.

In this example. we place the default clause at the top and the result is the same.

Return also breaks from a switch

In the following example, we move the above function inside a calculator function and use the return statement return to break the switch and return from it.

Please note that multiple return statements like the one above make It harder to understand especially if it is a very lengthy routine.

Grouping of Cases

The switch case gives us the unique ability to group multiple conditions together by omitting the break clause.

In the following example, values 1 to 5 execute the same code and so is 6 to 10.

Strict Equality Check

The Typescript has two operators for checking equality. One is == (equality operator or loose equality operator) and the other one is === (strict equality operator).

The Switch uses the Strict Equality Check while checking for values. If the types are different, then it returns false.

The following example returns Invalid, because the 3 (number) is not equal to "3" (string).

Also, note the use of any data type. Otherwise, it will result in a compiler error Type 'string' is not comparable to type 'number'.

Expressions in Value

You can also make use of expressions in value as shown below.

Typescript switch case with enum

The following example shows how to use the Typescript enum with the Switch case statement

Note the use of +num in the above example. + coerces the num to a number. Otherwise the Typecript compiler throws an error Type 'VehcileType.Car' is not comparable to type 'VehcileType.Plane'. This is a bug in Typescript.

Reference