Simple Tetris Clone in TypeScript

I wanted to create a JavaScript port of my tetris clone using the HTML5 canvas element but I never got the drive to start it, so it was lingering for ages in my TODO list. The final push come after TypeScript, a little language from the father of industrial grade languages like Delphi and C#. This was just enough to push me to use my little game to familiarize myself with this new language. 

So. How it went?

My overall experience has been positive. TypeScript is really a nice addition to the JavaScript ecosystem because it allows you to catch a lot of errors at compile time. Yes, I'm ashamed to admit it but I do many of these errors, it was one of the reasons I created Killa, I wanted the compiler to find typos for me. But TypeScript goes many steps ahead and already includes support for optional typing, classes, interfaces and namespaces and at the same time is JavaScript compatible and of practical use right now. I mean: it works.

The class system is based in the next JavaScript standard and I got used to it after a little time, I would have preferred a more conventional one but it's fine I guess. The optional typing system works like in AS3/Haxe and it's the one I was thinking for Killa so I already liked it. However, there is no "int" type, something that I really missed porting my game, because many errors porting C++ programs to JavaScript happen due to numerical conversion errors.

x = 5;

// C++
int n = x / 2;  // n = 2

// JavaScript
var n = x / 2;  // n = 2.5

The "this" keyword is also misleading inside a class method because it is still the "this" keyword from JavaScript and it can be the window object in some circumstances (that I found porting my game). Generics are missing, the arrays can be typed but I don't like the way how it's done, I think they can learn a bit from Haxe. At future, I'd love to see TypeScript deviating more and more from JavaScript and fixing the language in the process, however it's a difficult task at this moment because they want/need to support vanilla JavaScript and then you have to support things like "!==", ">>> 0", "[]=={}", etc. If it were me I'll add a JavaScript region tag, something like this:

    // paradise zone
#define js
    // all hell broke loose here...
#end
    // paradise zone again

This way you could still have JavaScript compatibility, but only in contained zones and you could enforce full TypeScript safety in the rest of your program. You could shrink the dangerous zones progressively as new JavaScript libraries are ported to TypeScript. But enough of my lame opinions, here you can see the auto-generated code, it's not beautiful but it can be followed. There is an option to pass the comments in TypeScript to the generated JavaScript code but as you can see it's not perfect.

I did not use any fancy JavaScript library for this little game so this probably works only in the latest versions of Firefox and Chrome. Use your mouse for control, clicking in the left/right side of the board would move the falling piece to the left/right side, clicking at the bottom of the board would drop the piece and clicking at the top of the board would make the piece rotate. The stand alone version can be found here (you can use your keyboard there).

TypeScript really shines when you are using their IDE support with Visual Studio, because then you can fix your errors at edition time and you get intellisense and all the other VS goodies (I can use all my keyboard shortcuts from VC++!!). This is nothing new: Dart tried before but it didn't grab my attention. Also in Windows I prefer Visual Studio to any Eclipse based IDE if possible. By the way the VS team must be proud, the Visual Studio 2012 edition is pretty gorgeous looking and it's very fast. The 2010 version was ugly and slow as hell (I still avoid it as the plague), and following the tendency I was expecting an even worse experience now but it seems they somehow pulled it off:

It's interesting to see somebody with brains at the top management level behind this Microsoft move, because they didn't screwed this opportunity with things like:

• we must make this closed source or use one of our Microsoft licenses: instead they used the Apache 2 license and that for patents issues is even better than the MIT license. They are even using git for version control.
• we must give IDE support only for the paid Professional Edition of Visual Studio: the internet is full of high quality open-source-cross-platform IDEs (QtCreator any?). I don't see many people paying big bucks for a Windows-only IDE to beta test a new language.
• let's bundle TypeScript with some ASP.Net crap and make it work the best in IE only: again no sign of Microsoft only technologies, they support Node.js and their demo was showcased in Chrome (the nerve!).

Of course they are not fooling anybody, Microsoft is doing this because it's in their best interest not to lose anything more with the web developer community after all the mess they helped to create. As anecdotal evidence, I didn't touch any client side JavaScript code for ages due to the terrible reputation of browsers like IE6, IE7 and IE8. I was under the impression that doing web development shortened your life fixing stupid problems, and I really admire the programmers that created things like Gmail and Facebook with so brittle tools. Things are improving it seems, but Microsoft still needs to do a lot. I'm not leaving Firefox for browsing or Chrome for development any time soon. I hope they don't miss their chance to implement the WebGL specification really soon or their browser is going to lack severely in the 3D games section. Making a whole new engine just to support IE when my game already works in all the other browsers is not going to happen unless there is a gun over my head or a big fat check under my pocket. At this time only grannies and prisoners use IE anyways and they don't play many games.