Post
Ask Question

TypeScript Project in Visual Studio 2012

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/


Similar Articles