Reader Level:
ARTICLE

Web Application Using TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 12, 2012
In this article I explain how to use a web application in TypeScript.
  • 0
  • 0
  • 2405

TypeScript

Microsoft has released a developer preview of TypeScript. TypeScript is a language for application-scale JavaScript. TypeScript helps programming teams to define interfaces among software components and to gain insight into the behavior of existing JavaScript libraries. TypeScript compiles to clean, readable, standards-based JavaScript.

These are some features of TypeScript:

  • TypeScript adds optional static types to JavaScript.
  • Class declarations
  • TypeScript implements modules
  • A Visual Studio plugin
  • It's Open Source

The following example show the sum of two numbers using a web application in TypeScript . In this example we enter two numbers and return it's sum using a web application. 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#.

Provide the name of your application as "First_App" and then click ok.

Step 2

After Step 1, right-click on "First_App". A pop up window is opened. Click on  "Add" -> "New Item" -> "Web From". Provide the name of your WebForm as "FirstApp.aspx" and then click ok.

Step 3

After this session the project has been created; A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files as in the following:


explorer-imge.jpg

Coding

FirstApp.ts

class sum

{

    constructor (public i: number,public j: number)

    {

    }

    Add()

    {

        return (this.i + this.j)

    }

}

window.onload = () =>

{

    var button = document.createElement('button')   

    button.innerText = "SUM"

    button.onclick = function () {

        var first = parseFloat((<HTMLInputElement>document.getElementById("Text1")).value);

        var second =parseFloat((<HTMLInputElement>document.getElementById("Text2")).value);  

        var total = new sum(first, second);

        alert("Add of Two number " + total.Add());       

    }

    document.body.appendChild(button)

}

 

FirstApp.aspx

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="first.aspx.cs"Inherits="website_use_ts.first"%>

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headtype="text/javascript"runat="server">

    <title></title>

    <styletype="text/css">

        #Button1 {

            z-index:1;

            left:318px;

            top:194px;

            position:absolute;

        }

        #Text2 {

            z-index:1;

            left:180px;

            top:49px;

            position:absolute;

        }

        #Text1 {

            z-index:1;

            left:181px;

            top:93px;

            position:absolute;

        }

    </style>

</head>

<body>

    <formid="form1"runat="server">

    <div>

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

        <asp:LabelID="Label1"runat="server"style="z-index:1;left:8px;top:51px;position:absolute"Text="Enter First Value"></asp:Label>

        <asp:LabelID="Label3"runat="server"Font-Italic="True"ForeColor="Blue"Text="Simple Application Using TypeScript"></asp:Label>

    </div>

    <inputid="Text2"type="text"/><p>

        <asp:LabelID="Label2"runat="server"style="z-index:1;left:10px;top:93px;position:absolute"Text="Enter Second Value"></asp:Label>

    </p>

    <p>

        &nbsp;</p>

    </form>

    <p>

        &nbsp;</p>

    <p>

        <inputid="Text1"type="text"/></p>

    <p>

        &nbsp;</p>

 

</body>

</html>

 

app.js

var sum = (function () {

    function sum(i, j) {

        this.i = i;

        this.j = j;

    }

    sum.prototype.Add = function () {

        return (this.i + this.j);

    };

    return sum;

})();

window.onload = function () {

    var button = document.createElement('button');

    button.innerText = "SUM";

    button.onclick = function () {

        var first = parseFloat((document.getElementById("Text1")).value);

        var second = parseFloat((document.getElementById("Text2")).value);

        var total = new sum(first, second);

        alert("Add of Two number " + total.Add());

    };

    document.body.appendChild(button);

};

//@ sourceMappingURL=app.js.map

 

Output


Enter two numbers, then click on the sum button:


final-image.jpg


Reference By

http://www.typescriptlang.org/

 

COMMENT USING

Trending up