Seshu's Views

TypeScript: An Introduction

2013-01-20T00:53:00.001-08:00

With HTML5 becoming more and more popular the need to learn JavaScript is ever increasing and making it the most used language for the web. Its used in one form or the other (jQuery etc.). That’s because even thought HTML5 has lots of features, they are still just tags and you need JavaScript to make something useful for most of the time, if not always. As the popularity is increased if the structure of the JavaScript code is not taken care properly, soon you will end up with spaghetti code and one can easily end up with functions and code mess. This is especially true for large scale applications.

There have been few patterns used by folks in the industry to solve this issue some what, but they aren’t straight forward, giving raise to alternatives like CoffeScript, ScriptSharp, Dart (by Google) and TypeScript (Microsoft). Although each of them have their own advantages the major advantage that TypeScript is its similarity with JavaScript (we can use JavaScript as is) and tooling that are beneficial for large scale applications.

So what is TypeScript? Just another language from Microsoft? well, here is official definition:

TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

For all those C++, C# or Java programmers who had difficulty dealing with dynamic typed languages such as JavaScript, Microsoft came up with an Open Source language implementation that is very much similar to the typed languages that can be compiled down to plain JavaScript. This can be learnt in the browser itself using TypeScript Playground , that gives instant intellisense and error display. It instantly compiles to JavaScript and same is displayed side by side.

TypeScript code files can be saved with .ts extension and it can be compiled to JavaScript using TypeScript’s (tsc.exe) compilation tool or by using a variety of editors/tools. Since it allows to use JavaScript syntax existing JavaScript frameworks such as jQuery, Node.js can be used with enhanced code help and the compiler can catch type issues etc. For that special declaration files can be used with an extension .d.ts for example for jQuery we can use jQuery.d.ts in tools such as Visual Studio 2012 and take advantage of error checking right away so that bugs can be caught in code editor.

To use TypeScript in VS2012, download and install the TypeScript plugin. I also recommend using Web Essentials 2012 since it provides optional side by side view of your TS code and JS code, which is helpful during learning phase. The TS plugin provides you with default project template (HTML Application with TypeScript) as well. Following is the default app.ts and generated app.js files side by side.

Looking at the above examples few things that come to views attention are the new keywords or annotations in TypeScript. Below is brief summary of those:

Type Annotations:

This is an optional by useful feature that allows us to use types while declaring the variables. For example if we want to specify a variable that should only store integers it is not possible in JavaScript because of its dynamic type nature. If you use == operator and others it does automatic type conversion that could lead to undesired results. Even though === operator can be used to be type safe, the whole thing is difficult for debugging. If such cases arise we can use Type annotations that will make sure the operations are type safe.

   1: var variable; // any value. same as not having a static type     2: var num1: number; // number type annotation    3: num1 = 1; // set the value after declaration     4: var num2: number = 2; // initialized and typed  in single line   5: var num3 = 3; //treated as number via type inference     6: var str = num1 + 'plus string';    7: num3 = 3 + '3'; // TypeScript compiler will generate an error here.

Similarly parameters can be type annotated so that we are sure what we are passing around during compile time.

   1: function areaofRectangle(width: number, height: number) {
   2:    var area = width * height;
   3:    return "The Area of passed Rectangle is" + area + " cm squared.";
   4: }
   5: document.body.innerHTML = areaofRectangle(30, 15);
   6: document.body.innerHTML = areaofRectangle(5, false); //Supplied parameters do not match any signature of call target.

Classes and Interfaces:

In static typed languages we often use classes and interfaces to organize the code into logical units, but there is no direct or easy way to do so in JavaScript making it hard to structure the code. This is where TypeScript comes in handy as it makes writing structured code easy some of it using classes and interfaces.

We can create classes using the class keyword of TypeScript and we can even add fields, properties and functions. The syntax that closely follows the ECMAScript6 proposal:

On the right we can see the compiled JavaScript, pure JavaScript that is interpreted normally by browsers and other JavaScript engines.

Interfaces can be implemented as above, when there is a need to create complex types. This can be helpful when you have a complex type that you want to use in your application such as an object that contains other properties. Note that this till compile time only, still it does provide you with nice way to structure the code.

With classes and interfaces comes inheritance but the keywords are NOT same for different types. You need to use ‘extends’ for class inheritance and implements for interface inheritance.

   1: class Vehicle{   2:     engine: string;   3:     constructor(engine: string) {   4:         this.engine = engine;   5:     }   6: }   7:     8: class Bus extends Vehicle{   9:     bigTires: bool;  10:     constructor(engine: string, bigTires: bool) {  11:         super(engine);  12:         this.bigTires = bigTires;  13:     }  14: }

Arrow Functions

If you work lot with lambda expressions in C#, arrow functions in TypeScript are very much similar. Also if you had found the scope of this operator challenging, then TS makes it little easy while writing call back functions. You can define an arrow function by ignoring/omitting the function keyword with => syntax.

   1: var multiply = function (h: number, w: number) {   2:     return h * w;   3: };   4:     5: var multiply2 = (h: number, w: number) => h * w;

As can be seen above TypeScript makes it easy to structure code and group them into logical units with all of its features and whether or not to use it would be situation dependent.

Following are few resources for further reading:

Official Website
Tutorials and samples
Live code editor with JavaScript output
Code Repository for discussions and bug tracking
What is TypeScript? by Anders Hejlsberg on Hanselminites.

JavaScript: Equality Operators and their evil twins.

2013-01-08T08:59:00.000-08:00

There are four operators supported by JavaScript that one can use to check conditions for equality. == and != as with most of the high level languages. But they work differently.

var five = 5;
if( five == '5')
alert(' The type is converted for you !'); // JavaScript executes this one !!!
else
alert(' integer and string are different); // This statement is executed in most of the typed high level languages.

What happens here is JavaScript automatically converts the type and then does checking. So we need to be extra cautious while using these operators, as they can result in some undesired results.

If you need to consider type safe checking then JavaScript provide another set of operators === and !==. These work in more familiar way as any other high level programming language. With these operators the JS engine will return if both the type and value are same otherwise false.

Is there any other difference? One might quickly ask. Well, it cases when the checking is done on same type there won’t be any difference, but in cases where the == and != does type conversion some very little performance effect would be there and these operators will be slow to execute when compared to === and !==.

Also there can be some inconsistencies in the way == and != are executed, hence its advised to use === and !== in most cases.

To is also ascertained by well-known JavaScript guru Douglas Crockford's in his excellent book JavaScript: The Good Parts,

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0' // false

0 == '' // true

0 == '0' // true

false == 'false' // false

false == '0' // true

false == undefined // false

false == null // false

null == undefined // true

' \t\r\n ' == 0 // true

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use ===and !==. All of the comparisons just shown produce false with the === operator.

Watch out for these differences while implementing JavaScript.

Windows 8 Preview: First Impressions

2012-07-18T18:31:00.001-07:00

Change is inevitable

Hollywood has been showing or out running general application styles for quite some time, of course they are the creative folks that can come up with such !deas. But now the general public will also see beautiful applications.

For all this to happen, one should really appreciate what Apple did. I believe its Apple that showed everyone, what Art can do to computer applications. The change in MS in this direction was due to the Traction from the success of Apple’s iPhones and iPads or as they say the iOS as well as Android.

The design of Windows 8 start screen is impressive especially because the focus here has been moved to content. As they mentioned by Jensen Harris during the MS build 2011 8 traits of great Metro style apps the focus should be on content, some thing that has been taken from the Web Design, but the chromelessness (no chrome) give another direction to think about design. This enables the developers to fully utilize screen space to carefully craft the applications. We will indeed or in future see beautifully designed apps on Windows as well.

I had been thinking for some time, whenever I see a Mac, why aren’t there artistic applications designed for Windows? Well, the thought/design process has been mostly for what the OS provides.

And with the new Metro style that MS introduced, I’m sure we’ll see difference in the way Windows Applications are built. I hope this gets into LOB apps as well.

Using metro style for Line of Business apps provide more usability for users.

This is a nice start screen that introduces Live tiles. This look and feel is consistent across all Windows 8 devices. PC, Tablet (Slate) or Phone.

Live tiles also enables developers to use the tile space (rectangular) to push notifications or important changes so that the users can get a quick little update on that the applications doing without going to the apps. This is like a app preview that we had with Win 7. But the fact that the developers get their own canvas to put what ever content instead of tiny live tile makes it more useful.

All Microsoft apps are impressive. The one I liked most is the Bing Weather App, even though it might look like a copy of Weather HD iOs App, it had its own content that tell us that its not just a copy but enough thought has been put on the design so that all necessary data is presented to the user.

One more difference that we see in Metro style is that mostly the data is painted from left to right rather then from top to bottom. We will be scrolling left to right as opposed to the traditional top to bottom. This might take some getting used to and special thought needs to be put on by the designers as well. But its not a compulsion.

Typography and Animations:

Another feature that one would observe straight away is the fonts and the animations or should we call transitions. The content that pops out when you look at a well designed metro application is the font and the important content highlighted by using bigger fonts.

This is an inspiration from real world usage at Airports, traffic signals notice boards etc. This is some thing that might help designers visualize what is more important in the content they want to present and highlight it in a specific metro design style.

Almost every update to the content has a transition built in. These include, loading of content, refresh, deletions additions etc. Most of these transitions are available for developers for free thru WinRT, new Developer API or runtime for developing Windows 8 metro style apps.

Will Add more content and more thought as I use the preview OS and others.