Post
Ask Question

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:
 
explorer-imge.jpg
 

Coding

 
FirstApp.ts
  1. class sum {  
  2.  constructor(public i: number, public j: number) {}  
  3.  Add() {  
  4.   return (this.i + this.j)  
  5.  }  
  6. }  
  7. window.onload = () => {  
  8.  var button = document.createElement('button')  
  9.  button.innerText = "SUM"  
  10.  button.onclick = function() {  
  11.   var first = parseFloat(( < HTMLInputElement > document.getElementById("Text1")).value);  
  12.   var second = parseFloat(( < HTMLInputElement > document.getElementById("Text2")).value);  
  13.   var total = new sum(first, second);  
  14.   alert("Add of Two number " + total.Add());  
  15.  }  
  16.  document.body.appendChild(button)  
  17. }  
FirstApp.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="first.aspx.cs"Inherits="website_use_ts.first"%>  
  2. <!DOCTYPEhtml>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <headtype="text/javascript"runat="server">  
  6.         <title></title>  
  7.         <styletype="text/css">  
  8.         #Button1 {  
  9.             z-index:1;  
  10.             left:318px;  
  11.             top:194px;  
  12.             position:absolute;  
  13.         } 
  14.         #Text2 {  
  15.             z-index:1;  
  16.             left:180px;  
  17.             top:49px;  
  18.             position:absolute;  
  19.         } 
  20.         #Text1 {  
  21.             z-index:1;  
  22.             left:181px;  
  23.             top:93px;  
  24.             position:absolute;  
  25.         }  
  26.         </style>  
  27.     </head>  
  28.     <body>  
  29.         <formid="form1"runat="server">  
  30.             <div>  
  31.                 <scriptsrc="app.js">  
  32.                 </script>  
  33.                 <asp:LabelID="Label1"runat="server"style="z-index:1;left:8px;top:51px;position:absolute"Text="Enter First Value">  
  34.                 </asp:Label>  
  35.                 <asp:LabelID="Label3"runat="server"Font-Italic="True"ForeColor="Blue"Text="Simple Application Using TypeScript">  
  36.                 </asp:Label>  
  37.             </div>  
  38.             <inputid="Text2"type="text"/>  
  39.             <p>  
  40.                 <asp:LabelID="Label2"runat="server"style="z-index:1;left:10px;top:93px;position:absolute"Text="Enter Second Value">  
  41.                 </asp:Label>  
  42.             </p>  
  43.             <p>  
  44.          </p>  
  45.         </form>  
  46.         <p>  
  47.          </p>  
  48.         <p>  
  49.             <inputid="Text1"type="text"/>  
  50.         </p>  
  51.         <p>  
  52.          </p>  
  53.     </body>  
  54. </html>  
app.js
  1. var sum = (function() {  
  2.  function sum(i, j) {  
  3.   this.i = i;  
  4.   this.j = j;  
  5.  }  
  6.  sum.prototype.Add = function() {  
  7.   return (this.i + this.j);  
  8.  };  
  9.  return sum;  
  10. })();  
  11. window.onload = function() {  
  12.  var button = document.createElement('button');  
  13.  button.innerText = "SUM";  
  14.  button.onclick = function() {  
  15.   var first = parseFloat((document.getElementById("Text1")).value);  
  16.   var second = parseFloat((document.getElementById("Text2")).value);  
  17.   var total = new sum(first, second);  
  18.   alert("Add of Two number " + total.Add());  
  19.  };  
  20.  document.body.appendChild(button);  
  21. };  
Output 
Enter two numbers, then click on the sum button:
 
final-image.jpg
 
Reference By
http://www.typescriptlang.org/


Similar Articles