2013-01-04

Trying out TypeScript

The introductory video on TypeScript that Anders Hejlsberg put together is awesome and I highly recommend watching it. I finally had some free time and decided to find out what the hype about TypeScript was all about. Even in its early stages, I am seriously impressed. I'm expecting this to save me many hours of JavaScript development time.

I've been using jQuery DataTables a lot lately, so my first experimentation is with it. There is an example for a cross domain data source using JSONP, which I'm simply going to reproduce using TypeScript. The page was called jsonp.html, so for simplicity I created a jsonp.ts. With the Web Essentials extension installed, a jsonp.js is created automatically when I save. Here is the jsonp.ts:



Yes, the TypeScript looks almost identical to the original JavaScript, except I'm using lambda "arrow function" expressions. What is hard to explain without a video or live demo is just how nice it is to have intellisense, tab completion, type inference, and error messages while coding instead of at run time.



I also started an interface for DataTables. At first, I was overzealous and started mapping it all, but then I limited the scope to just what was needed for this blog post. The file jquery.dataTables.d.ts has this in it:



















One thing I struggled a bit with was defining fnServerData. I ran into problems anytime I tried to make any of the parameters optional. I'm not sure if that is a bug or something I don't understand yet. It will also be nice if I could have defined fnCallback using an already defined function signature. I'll have to check to see if that is possible. I didn't use modules yet and it may be nice to have it called DataTables.Settings. TypeScript will become even more compelling once JavaScript library teams start making official TypeScript interfaces.



Similarities with F#

I know several programming languages and F# is my favorite. Several aspects of TypeScript remind me of it:


    

  • both are open source under the Apache License 2.0
    • 

  • the compilers for both are written in their language
    • 

  • Luke Hoban has been on both teams at Microsoft
    • 

  • the amount of type inference and how to provide type annotations
    • 

  • typed functions as first-class values
    • 




Web Browser Same Origin Security Policy

This is a digression about web browsers and their support for getting data from other domains. JSONP is a hack to make it work, but it only works for HTTP GET requests. Unfortunately, ASP.NET WebMethods are HTTP POST only so JSONP doesn't work. A newer solution is CORS, but Internet Explorer didn't get it right until version 10. Because of the IE market share and because new version adoption doesn't happen like Chrome or Firefox, it may be a while before it can be used on public facing sites.



I originally set out to use the first DataTables server-side example, but forgot about this security policy. I asked Allan Jardine if he could enable CORS at www.datatables.net, but no luck. I understand the reasoning. Without CORS enabled, it is still possible to use the services if you disable the security in Chrome. Of course, with this you'll get a valid warning:













On Windows 8, with Chrome completely closed I run:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security



While the security is disabled, I make sure I don't navigate to any other places. Here is the TypeScript code that works.











If CORS was enabled at www.datatables.net, it should work. If you set the dataType, type, and contentType, the HTTP headers for CORS will show up in the request. The origin is null because I loaded a local file in the browser.



























at