Post
Ask Question

Building a Simple Website With TypeScript

Building web application with TypeScript

 
Microsoft has released a developer preview of TypeScript, a new programming language like JavaScript that is translated into JavaScript so that its apps can be run in any browser. In other words, TypeScript is a superset of JavaScript and you write it like you write JavaScript. And today, I explored it and I am sharing it with you. Let's get started by building a simple website with TypeScript. Use the following to create a web application with TypeScript.
 
Step 1

Open Visual Studio 2012 and create a new TypeScript application. Click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application like "TypeScriptWithWeb", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. Go to the Solution Explorer, which is on the right side of Visual Studio, then right-click on TypeScriptWithWeb. A pop-up window is opened. Click on  Add->New Item->Web From.  
 
create-web-application-with-typescript1.jpg
 
Click Next Item then click on the Webform and click on Ok. Now you have a new project (WebForm1.aspx).
 
Step 3
 
WebForm1.aspx source code
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"  
  2.   
  3. Inherits="TypeScriptWithWeb.WebForm1"%>  
  4. <!DOCTYPEhtml>  
  5. <html  
  6.     xmlns="http://www.w3.org/1999/xhtml">  
  7.     <headrunat="server">  
  8.         <title></title>  
  9.     </head>  
  10.     <body>  
  11.         <formid="form1"runat="server">  
  12.             <div>  
  13.                 <scriptsrc="app.ts">  
  14.                 </script>//ref of ts file  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>   
app.ts
  1. interface MyInterface {  
  2.  firstname: string;  
  3.  lastname: string;  
  4.  country: string;  
  5. }  
  6. class MyClass {  
  7.  fulldata: string;  
  8.  constructor(public firstname, public lastname, public country) {  
  9.   this.fulldata = firstname + " " + lastname + " " + country;  
  10.  }  
  11. }  
  12. function data(mcn: MyInterface) {  
  13.  return "Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;  
  14. }  
  15. window.onload = () => {  
  16.  var name = new MyClass("Mcn", "solution", " at India");  
  17.  document.body.innerHTML = data(name);  
  18. }  
In the above example if you use the js file, then it will work fine because it is a file of JavaScript, nothing else. Now if you are compiling it, you will not see any output because I used app.ts reference in my .aspx file. So we need to compile app.ts to produce the app.js file and this is compulsory because the browser only understands JavaScript, not TypeScript. With the help of Step a, you can generate the JavaScript file. 
 
Step 3a
 
Open the "Command Prompt" and navigated to the website root location where the app.ts file exists and then execute the command "tsc app.ts" to produce the JavaScript file that is "app.js".
 
create-web-application-with-typescript2.jpg
 
app.js
  1. var MyClass = (function() {  
  2.  function MyClass(firstname, lastname, country) {  
  3.   this.firstname = firstname;  
  4.   this.lastname = lastname;  
  5.   this.country = country;  
  6.   this.fulldata = firstname + " " + lastname + " " + country;  
  7.  }  
  8.  return MyClass;  
  9. })();  
  10.   
  11. function data(mcn) {  
  12.  return "Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;  
  13. }  
  14. window.onload = function() {  
  15.  var name = new MyClass("Mcn", "solution", " at India");  
  16.  document.body.innerHTML = data(name);  
  17. };  
And then run your application.
 
Step4

The output looks like:
 
create-web-application-with-typescript3.jpg


Similar Articles