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
  1. class Greeter {
  2. element: HTMLElement;
  3. span: HTMLElement;
  4. timerToken: number;
  5. constructor(element: HTMLElement) {
  6. this.element = element;
  7. this.element.innerText += "The time is: ";
  8. this.span = document.createElement('span');
  9. this.element.appendChild(this.span);
  10. this.span.innerText = new Date().toUTCString();
  11. }
  12. start() {
  13. this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
  14. }
  15. stop() {
  16. clearTimeout(this.timerToken);
  17. }
  18. }
  19. window.onload = () => {
  20. var el = document.getElementById('content');
  21. var greeter = new Greeter(el);
  22. greeter.start();
  23. };
default.html
  1. <!DOCTYPEhtml>
  2. <htmllang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <title>TypeScript HTML App</title>
  7. <linkrel="stylesheet"href="app.css"type="text/css"/>
  8. <scriptsrc="app.js">
  9. </script>
  10. </head>
  11. <body>
  12. <h1>First TypeScript HTML App Demo</h1>
  13. <divid="content"/>
  14. </body>
  15. </html>
Referenced By
http://www.typescriptlang.org/