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>
</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);
};
//@ sourceMappingURL=app.js.map |
Output
Enter two numbers, then click on the sum button:
![final-image.jpg]()
Reference By
http://www.typescriptlang.org/