Decide to use TypeScript on HTML5 + JavaScript

I decide to give my big data project a new face. A HTML5 face, not WPF or SilverLight.

Continue from the previous post about HTML5/JavaScript, I decide to spend several hours on a new tool to write JavaScript. I compared Dart and TypeScript. As a long time C# developer, I feel it will be easier to follow another Andres's language. One advance for TypeScript can host the JavaScript code and this can help me to learn JavaScript as well.

After I install the TypeScript in VS2012, I have to reboot my computer. It was a little surprise as I did not expect a preview language needs reboot my computer while VS SP1 does not requires a reboot. But anyway, it does not take long.

I created the first TypeScript project and the sample code helps me understand what is going on. The first small project I did is a small animation on the Canvas. The following code is located in app1.ts which will be compiled to app1.js. In the HTML page, I have a canvas whose id is "canvas0".

 var c = <HTMLCanvasElement> document.getElementById("canvas0");  
 var ctx = c.getContext("2d");  
 setInterval(() =>  
 {  
   var i = new Date().getSeconds() % 10 / 10;  
   var width = c.width  
   var height = c.height  
   // Create gradient  
   var grd = ctx.createLinearGradient(0, 0, width, 0);  
   grd.addColorStop(0, "red");  
   grd.addColorStop(i, "yellow");  
   // Fill with gradient  
   ctx.fillStyle = grd;  
   ctx.fillRect(0, 0, width, height);  
 }, 500)  

In order to make the debug work, you have to use IE as default browser. Adding a new item does not work well, I have to manually add a .ts file and fix the project file.