How to Use While Loop In TypeScript

while Loop in TypeScript

A While loop is also a type of loop that will execute code until the given condition is true. You code the keyword "while" followed by a condition expression in parentheses and a block of code in braces. When the while statement is executed, the conditional expression is evaluated. If the expression is true, then the block of code is executed and the while loop is attempted again. As soon as the expression evaluates to false, the block of code is skipped and the while statement is done. If the expression evaluates to false the first time it is checked, the block of code won't be executed at all.

Syntax

while( initialize counter<condition)

{
 
//Our code that should be run

  increment a counter;
 }

The following example shows the factorial of 5. In this example I have a loop class and define a while loop. We initialize a variable f=1. The while loop starts at position 1 and continues as long as n is less than 5. f will increase by 1 each time the loop runs. Let's see how I implement the while loop in TypeScript. Let's use the following steps.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click HTML Application for TypeScript under Visual C#. Give the name of your application as "factorial" and then click ok.

Step 2

After this session the project has been created; a new window is opened on right side. This window is called the Solution Explorer. Solution Explorer contains the ts file, js file, css file and html file:

Coding

factorial.ts

class loop

{

    fact: number;

    constructor (fact:number)

    {

        this.fact = fact;

    }   

    factorial()

    {

        var count = 1;

        var f = 1;

        while (f<=this.fact) {

            count = count * f;

            f++               

            }

           alert("Factorial of 5 is ->" + count);

        }

    }

window.onload = () => {

    var s = new loop(5);

    s.factorial();

};

 

factorialexample.html

<!DOCTYPEhtml>

 

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

<head>

    <metacharset="utf-8"/>

    <title>Factorial example TypeScript HTML App</title>

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

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

</head>

<body>

    <h1>Factorial of a Number(5) in TypeScript</h1>

    <divid="content"/>

</body>

</html>

 

app.js

var loop = (function () {

    function loop(fact) {

        this.fact = fact;

    }

    loop.prototype.factorial = function () {

        var count = 1;

        var f = 1;

        while(f <= this.fact) {

            count = count * f;

            f++;

        }

        alert("Factorial of 5 is ->" + count);

    };

    return loop;

})();

window.onload = function () {

    var s = new loop(5);

    s.factorial();

};

 

Output

 

final result.gif

Reference By

http://www.typescriptlang.org/

Up Next
    Ebook Download
    View all
    Test
    Read by 16 people
    Download Now!
    Learn
    View all