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.
