Post
Ask Question

Switch Statement In TypeScript

Switch Statement in TypeScript

 
A switch statement is a convenient way to express a certain form of condition. Specifically, it can be used in place of an if statement with multiple else if just one expression is tested for equality with several values. The switch statement implements a control structure that is often referred to as the case structure.
 
The switch statement starts with the word switch followed by a switch expression inside of parentheses. This expression is not a logical expression. It is an expression that returns a single value that will be used to determine which case to execute. The expression is often as simple as a single variable.
 
Once the value for the expression is found, the switch statement checks each of the values in the case labels. Then, it begins executing the code that follows the first case label that is equal to the result of the expression. It continues executing until it reaches either a break statement or the end of the switch statement.
 
If no case labels match the value in the switch expression, the switch statement starts executing the code that follows the default label. But this default case is optional. If it is omitted and no case labels match the expression, the switch statement won't execute any code.
 
Syntax
  1. switch (expression) {  
  2.  case label:  
  3.   statements;  
  4.   break;  
  5.  case label:  
  6.   statements;  
  7.   break;...  
  8.  default:  
  9.   statements;  
  10. }  
The following example shows how to use a switch statement in TypeScript. In this example the switch statement is used to display the marks range against a particular grade.Let's see how I implement the switch statement in TypeScript. Let's use the following steps.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. Give the name of your application as "switchcase" and then click ok.
 
Step 2
 
After this session the project has been created; a new window is opened on the right. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, an HTML file.
 
switchcase.ts
  1. class switchcase {  
  2.  marksgrade() {  
  3.   var grade: string;  
  4.   grade = prompt("Enter a Grade");  
  5.   switch (grade) {  
  6.    case 'A+':  
  7.     alert("Marks >= 90" + "\n" + "Excellent");  
  8.     break;  
  9.    case 'A':  
  10.     alert("Marks [ >= 80 and <90 ]" + "\n" + "Well Above Average");  
  11.     break;  
  12.    case 'B+':  
  13.     alert("Marks [ >= 70 and <80 ]" + "\n" + "Above Average");  
  14.     break;  
  15.    case 'B':  
  16.     alert("Marks [ >= 60 and <70 ]" + "\n" + "Average");  
  17.     break;  
  18.    case 'C':  
  19.     alert("Marks < 60" + "\n" + "Below Average");  
  20.     break;  
  21.    default:  
  22.     alert("Wrong Grade.........");  
  23.   }  
  24.  }  
  25. }  
  26. window.onload = () => {  
  27.  var greeter = new switchcase();  
  28.  greeter.marksgrade();  
  29. };   
switchcasedemo.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>switch statement</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Switch Statement in TypeScript HTML App</h2>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>     
app.js 
  1. var switchcase = (function() {  
  2.  function switchcase() {}  
  3.  switchcase.prototype.marksgrade = function() {  
  4.   var grade;  
  5.   grade = prompt("Enter a Grade");  
  6.   switch (grade) {  
  7.    case 'A+':  
  8.     {  
  9.      alert("Marks >= 90" + "\n" + "Excellent");  
  10.      break;  
  11.     }  
  12.    case 'A':  
  13.     {  
  14.      alert("Marks [ >= 80 and <90 ]" + "\n" + "Well Above Average");  
  15.      break;  
  16.     }  
  17.    case 'B+':  
  18.     {  
  19.      alert("Marks [ >= 70 and <80 ]" + "\n" + "Above Average");  
  20.      break;  
  21.     }  
  22.    case 'B':  
  23.     {  
  24.      alert("Marks [ >= 60 and <70 ]" + "\n" + "Average");  
  25.      break;  
  26.     }  
  27.    case 'C':  
  28.     {  
  29.      alert("Marks < 60" + "\n" + "Below Average");  
  30.      break;  
  31.     }  
  32.    default:  
  33.     {  
  34.      alert("Wrong Grade.........");  
  35.     }  
  36.   }  
  37.  };  
  38.  return switchcase;  
  39. })();  
  40. window.onload = function() {  
  41.  var greeter = new switchcase();  
  42.  greeter.marksgrade();  
  43. };  
Output 1
 
enter-grade.gif
 
Click on the "Ok" button. 
 
Output 2
 
final-result.gif
 
Referenced By
http://www.typescriptlang.org/


Similar Articles