Reader Level:
Articles

How To Use Switch Statement In TypeScript

By Nitin Bhardwaj on October 18, 2012
In this article, we are explaining how we can use the switch statement in TypeScript with an example.
  • 0
  • 0
  • 13834

Switch Statement in TypeScript

A switch statement is a convenient way to express a certain form of conditions. 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

switch (expression)

{

  case label :

    statements;

    break;

  case label :

    statements;

    break;

 ... default : statements;

}

The following example shows how to use a switch statement in TypeScript. In this example 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 and html file.

Coding

switchcase.ts

class switchcase {

   marksgrade() 

    {

    var grade: string;

    grade = prompt("Enter a Grade");

    switch (grade) 

    { 

    case'A+'

      alert("Marks >= 90"+"\n"+"Excellent"); 

      break

    case'A'

      alert("Marks [ >= 80 and <90 ]"+"\n"+"Well Above Average"); 

      break

    case'B+'

      alert("Marks [ >= 70 and <80 ]"+"\n"+"Above Average"); 

      break

    case'B'

      alert("Marks [ >= 60 and <70 ]"+"\n"+"Average"); 

      break

    case'C'

      alert("Marks < 60"+"\n"+"Below Average"); 

      break

    default

      alert("Wrong Grade........."); 

    } 

    } 

}

window.onload = () => {

    var greeter = new switchcase();

    greeter.marksgrade();

};

 

switchcasedemo.html

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>switch statement</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h2>Switch Statement in TypeScript HTML App</h2>

    <divid="content"/>

</body>

</html>

 

app.js

var switchcase = (function () {

    function switchcase() { }

    switchcase.prototype.marksgrade = function () {

        var grade;

        grade = prompt("Enter a Grade");

        switch(grade) {

            case'A+': {

                alert("Marks >= 90" + "\n" + "Excellent");

                break;

            }

            case'A': {

                alert("Marks [ >= 80 and <90 ]" + "\n" + "Well Above Average");

                break;

            }

            case'B+': {

                alert("Marks [ >= 70 and <80 ]" + "\n" + "Above Average");

                break;

            }

            case'B': {

                alert("Marks [ >= 60 and <70 ]" + "\n" + "Average");

                break;

            }

            case'C': {

                alert("Marks < 60" + "\n" + "Below Average");

                break;

            }

            default: {

                alert("Wrong Grade.........");

            }

        }

    };

    return switchcase;

})();

window.onload = function () {

    var greeter = new switchcase();

    greeter.marksgrade();

};

 

Output 1


enter-grade.gif

 

Click on the "Ok" button.

 

Output 2


final-result.gif

 

Reference By

http://www.typescriptlang.org/

Nitin Bhardwaj

Normal 0 false false false EN-US X-NONE X-NONE ... Read more

COMMENT USING

Trending up