Web Application Using TypeScript

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 shows the sum of two numbers using a web application in TypeScript. In this example, we enter two numbers and return its 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:

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>
<html
xmlns="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>
</p>
</form>
<p>
</p>
<p>
<inputid="Text1"type="text"/>
</p>
<p>
</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);
};

Output

Enter two numbers, then click on the sum button:

Reference By

http://www.typescriptlang.org/

Web Application Using TypeScript

Reactions

TypeScript

Coding

Comments