ARTICLE

How to Use While Loop In TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript October 29, 2012
In this article I will explain how to use a while loop in TypeScript with an example.
Reader Level:

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/

Login to add your contents and source code to this article
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts