ARTICLE
Building a Simple Website With TypeScript
In this article I am going to explain how to build a 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 at the right side of Visual Studio, then right-click on TypeScriptWithWeb. A pop up window is opened. Click on Add->New Item->Web From.
Click Next Item then click on the Web from and click on Ok. Now you have a new project (WebForm1.aspx).
Step 3
Coding on web page
WebForm1.aspx source code
| <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs" Inherits="TypeScriptWithWeb.WebForm1"%> <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> </head> <body> <formid="form1"runat="server"> <div> <scriptsrc="app.ts"></script>//ref of ts file </div> </form> </body> </html> |
Coding on ts page
app.ts
| interface MyInterface { firstname: string; lastname: string; country: string; } class MyClass{ fulldata: string; constructor (public firstname, public lastname, public country) { this.fulldata = firstname + " " + lastname + " " + country; } } function data(mcn: MyInterface) { return"Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country; } window.onload = () => { var name = new MyClass("Mcn","solution"," at India"); document.body.innerHTML = data(name);
} |
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, it 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. By the help of Step a, you can generate the JavaScript file.
Step a
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".
app.js
| var MyClass = (function () { function MyClass(firstname, lastname, country) { this.firstname = firstname; this.lastname = lastname; this.country = country; this.fulldata = firstname + " " + lastname + " " + country; } return MyClass; })(); function data(mcn) { return"Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country; } window.onload = function () { var name = new MyClass("Mcn","solution"," at India"); document.body.innerHTML = data(name);
}; |
And then run your application.
Step4
The output looks like:
