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.

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

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"
Inherits="TypeScriptWithWeb.WebForm1"%>
<!DOCTYPEhtml>
<html
xmlns="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>

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, 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".

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:

1 Comment

Join the conversation! Your thoughts help the community grow.

Sam Hobbs14y ago
You should not need to execute tsc like that. It should be automatic. I am using VS 2010, not VS 2012 so I do not know what the easiest solution is but TypeScript is easier to use in VS 2012 than in prior versions. Even if you are going to explicitly execute tsc, the two articles I have written should help, but when using VS 2012 I suggest learning how to use VS 2012 to do TypeScript.