How to override multiple if-else conditions using a switch statement in TypeScript?

In this tutorial, we will learn to override the multiple if-else conditions using the switch case statement in TypeScript. The single if-else statement is used to execute the condition statement. If the condition becomes true, the statement of if block executes otherwise control fallbacks to the else block and executes its statement.

In some cases, developers must execute the code blocks on different conditions. For that, they require to write multiple if-else statements of ladder of if-else statements. Here, we will convert that ladder of if-else statements to switch case statements.

Converting If-else conditions to Switch Statement in TypeScript

Here, we have taken the array of edges and displayed the different words according to the age of the human using the if-else ladder.

// Array of ages
let ages: Array<number> = [32, 5, 12, 34, 54, 65, 76];
// if-else ladder for different range of edges
for (let age of ages) {
   if (age <= 10) {
      // print childern
   } else if (age > 10 && age <= 20) {
      // print younger
   } else if (age > 20 && age <= 60) {
      // print mature man
   } else {
      // print old man
   }
}

Now, we will convert the above if-else ladder to the switch case statement. The switch case statement takes the value as a parameter for which we have created the different cases. Here, we use the conditions for the different cases, which return the boolean values. So, we have passed the ‘true’ boolean value as a parameter of the switch case.

// Array of ages
let ages: Array<number> = [32, 5, 12, 34, 54, 65, 76];
// Switch case statement for different range of edges
for (let age of ages) {
   switch (true) {
      case age <= 10:
      // print children
      break;
      case age > 10 && age <= 20:
      // print younger
      break;
      case age > 20 && age <= 60:
      // print mature man
      break;
      default:
      // print old man
   }
}

In the above syntax, we have used the switch case statement for the different cases of the age.

Example 1

In the example below, we have created an array of ages containing different numbers from 0 to 80. After that, we used the for loop to iterate through the array elements, and for every element, we evaluated the switch case statement.

Also, users can see that we have used the break keyword to break the statement and default case, which is equal to the final else block in the if-else ladder. In the output, users can observe that it prints different words according to the value of age.

let ages: Array<number> = [32, 5, 12, 34, 54, 65, 76];
for (let age of ages) {
   switch (true) {
      case age <= 10:
         console.log(age + " = child");
         break;
      case age > 10 && age <= 20:
         console.log(age + " = younger");
         break;
      case age > 20 && age <= 60:
         console.log(age + " = mature man");
         break;
      default:
      console.log(age + " =  old man");
   }
}

On compiling, it will generate the following JavaScript code −

var ages = [32, 5, 12, 34, 54, 65, 76];
for (var _i = 0, ages_1 = ages; _i < ages_1.length; _i++) {
   var age = ages_1[_i];
   switch (true) {
      case age <= 10:
         console.log(age + " = child");
         break;
      case age > 10 && age <= 20:
         console.log(age + " = younger");
         break;
      case age > 20 && age <= 60:
         console.log(age + " = mature man");
         break;
      default:
         console.log(age + " =  old man");
   }
}

Output

The above code will produce the following output −

32 = mature man
5 = child
12 = younger
34 = mature man
54 = mature man
65 =  old man
76 =  old man

Example 2

In the example below, we have created the enum name Websites, which contains the different websites.  After that, we created the variable named web, which contains the value of the ‘TutorialsPoint’ website from the enum.

The getWebsites() function prints the value using the switch case statement according to the value of the web variable. Basically, users can learn from the below example to use the enum values in the switch case statement.

// Creating the enum for different sites
enum Websites {
   TutorialsPoint,
   Tutorix,
}
// Creating the web variable containing the value TutorialsPoint
var web: Websites = Websites.TutorialsPoint;

// function containing the switch case statement
function getWebsites() {
   // Switch case statement for web variable
   switch (web) {
      case Websites.TutorialsPoint:
         console.log("You are on TutorialsPoint Website.");
         break;
      case Websites.Tutorix:
         console.log("You are on Tutorix Website.");
         break;
   }
}

getWebsites(); // get websites

On compiling, it will generate the following JavaScript code −

// Creating the enum for different sites
var Websites;
(function (Websites) {
   Websites[Websites["TutorialsPoint"] = 0] = "TutorialsPoint";
   Websites[Websites["Tutorix"] = 1] = "Tutorix";
})(Websites || (Websites = {}));
// Creating the web variable containing the value TutorialsPoint
var web = Websites.TutorialsPoint;
// function containing the switch case statement
function getWebsites() {
   // Switch case statement for web variable
   switch (web) {
      case Websites.TutorialsPoint:
         console.log("You are on TutorialsPoint Website.");
            break;
      case Websites.Tutorix:
         console.log("You are on Tutorix Website.");
            break;
   }
}
getWebsites(); // get websites

Output

The above code will produce the following output −

You are on TutorialsPoint Website.

Users learned to convert the if-else ladder to switch case statements in this TypeScript tutorial. In the first example, users learned to use the conditional statement for the switch statement cases. In the second example, users learned to use the enum values for the switch statement cases.

Also, users learned to use the break and default keyword with the switch case in TypeScript.