Reader Level:
ARTICLE

TypeScript Project in Visual Studio 2012

Posted by Nitin Bhardwaj Articles | TypeScript October 04, 2012
In this article I have described how to create a TypeScript project in Visual Studio 2012
  • 0
  • 0
  • 5071

TypeScript Project in Visual Studio 2012

TypeScript is a superset of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. TypeScript enables great tooling experiences for JavaScript development. You are writing client-side JavaScript to run on Windows, Internet Explorer, and any other browsers and operating systems, or whether you're writing server-side JavaScript to run on Windows Azure and other servers and clouds.

How to Start a Project

Step 1

First of all we open Visual Studio 2012 and take the TypeScript application project shown under Visual C# and called HTML Application with TypeScript.

first-window-start-project-type-script.gif

Step 2

After performing this action the project has been created; your new project should look like this:

second-project-window-type-script.gif

Step 3

Then when you press F5 or click on Debug it will tell you that you need a Web.Config file to enable debugging, as in:

debugging-window-type-script.gif

Step 4

When you click Ok, the project should start in your browser and finally you are good to go.

final-result-window-type-script.gif

Coding

app.ts

class Greeter {

    element: HTMLElement;

    span: HTMLElement;

    timerToken: number;

   

    constructor (element: HTMLElement) {

        this.element = element;

        this.element.innerText += "The time is: ";

        this.span = document.createElement('span');

        this.element.appendChild(this.span);

        this.span.innerText = new Date().toUTCString();

    }

 

    start() {

        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);

    }

 

    stop() {

        clearTimeout(this.timerToken);

    }

 

}

window.onload = () => {

    var el = document.getElementById('content');

    var greeter = new Greeter(el);

    greeter.start();

};

 

default.html

<!DOCTYPEhtml>

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h1>First TypeScript HTML App Demo</h1>

    <divid="content"/>

</body>

</html>


Reference By

http://www.typescriptlang.org/

COMMENT USING

Trending up