Cacomania: TypeScript, why you should fall in love with it

Cacomania

TypeScript, why you should fall in love with it

Guido Krömer - 9. January 2013 - Tags: , ,

The possibilities with JavaScript are awesome, but the maintainability is sometime really crappy, this is why Microsoft released TypeScript, which is a class based and optionally strictly typed language, as a superset of JavaScript. The Browsers does not need to support TypeScript since it gets compiled into JavaScript, the compilation is still readable, too. Even it is from Microsoft you don't need to buy Windows or Visual Studio, although there is an official Plugin for VS which works with the free Visual Studio Express 2012 for Web, too. In the *nix world there is a Node.js package named "typescript" which contains the compiler.

Just a small example

The example I created is a simple class for a vector 2 and a class for a vector 3 which extends the vector 2 class. In both implementations the subtract method in the Vector3 class has not been overridden. The result in both cases will be that subtracting a vector 3 with another vector 3 will ends with a Vector2. It could happen that no run-time error will be thrown, then the bug might be hard to find.

Here is the TestJs.js file which contains the pure JavaScript implementation:

Below you will find the output running the script with Node.js, the bug will occur at "Vector3 Sub:...".

$ node TestJs.js 
Vector2 Add: X: 9 Y: 9
Vector2 Sub: X: -3 Y: -3
Vector2 Dot: 36
Vector2 Magnitdue A: 4.242640687119285
Vector2 Magnitdue B: 8.48528137423857
Vector3 Add: X: 9 Y: 9 Z: 9
Vector3 Sub: X: -3 Y: -3
Vector3 Dot: 54
Vector3 Magnitdue A: 5.196152422706632
Vector3 Magnitdue B: 10.392304845413264

This is the implementation with the same bug in TypeScript:

The TestTs.ts file has to be compiled to JavaScript with the following command:

$ tsc TestTs.ts 
/home/caco/tmp/4476016/TestTs.ts(62,26): Cannot convert 'Vector2' to 'Vector3'

Now we are getting a compile time waring :) . Nevertheless the TypeScript compiler creates a TestTs.js file which can run with Node.js for example, too.

$ node TestTs.js 
Vector2 Add: X: 9 Y: 9
Vector2 Sub: X: -3 Y: -3
Vector2 Dot: 36
Vector2 Magnitdue A: 4.242640687119285
Vector2 Magnitdue B: 8.48528137423857
Vector3 Add: X: 9 Y: 9 Z: 9
Vector3 Sub: X: -3 Y: -3
Vector3 Dot: 54
Vector3 Magnitdue A: 5.196152422706632
Vector3 Magnitdue B: 10.392304845413264

Here is the same error likes in the pure JavaScript implementation, but though the compile time warning we don't have to debug our code.

The compilation result

If you take a look at the TestTs.js file, the output produced by the TypeScript compiler is very readable, which is essential for debugging the code.

Visual Studio Express 2012 for Web with TypeScript

If I would have used VS with the Plugin, the error would have already been displayed during coding as you can see below.
Visual Studio Express 2012 for Web, TypeScript shows semantic error.

IntelliSense works like a charm and gives some Java/C# feeling.
Visual Studio Express 2012 for Web, TypeScript with IntelliSense.

That's All Folks!