ARTICLE

Building a Simple Website With TypeScript

Posted by Sharad Gupta Articles | TypeScript December 03, 2012
In this article I am going to explain how to build a website with TypeScript.
Reader Level:

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.  


create-web-application-with-typescript1.jpg

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

 

create-web-application-with-typescript2.jpg


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:

create-web-application-with-typescript3.jpg

COMMENT USING