TypeScript and Closure

For the past few years I've worked a lot on large JavaScript projects. JS is a very dynamic language and that means it is very difficult to maintain a reliable code base for multiple developers over long periods of time without strong tooling.

For most of that time, we've used Google's Closure Compiler. Closure (the compiler) is extremely good and very useful. Although its main way of selling itself is to describe itself as an advanced minifier, its real value is in its strong understanding of the JS you give it and its ability to perform a lot of static checking. Closure (the library) is not something I would recommend, but the compiler is solid.

The only real downside of Closure is that it requires adding ugly annotations to your code, e.g.

12345
/** 
  * @param {string} s
  * @return {number}
  */
function toNumber(s) { return parseInt(s, 10); }

I think that the fact it requires all these annotations to become useful is the main reason that Closure has been largely overlooked by JS developers (i.e. "too much effort"). But I would argue that requiring type documentation is not really a bad thing if you want maintainable code.

The flip side of this is that Closure code is just JavaScript. You don't even need to invoke the compiler to test your modifications - just fire up your browser and away you go (well, unless dependencies need regenerating, but that's actually quite rare). Assuming you are using the compiler as a safety check, it's usually only necessary to use it before you're ready to commit your code.

TypeScript

Next onto the scene is TypeScript. TypeScript is a compile-to-JS language by Microsoft that fulfils the same niche as Closure. It adds type information into the language syntax and its compiler is able to perform the same class of static checks as Closure. It looks a bit neater:

1
function toNumber(s: string) { return parseInt(s, 10); }

The main feature that TypeScript gains, as a result of being its own language and not a set of non-universally recognised comment conventions, is that IDEs recognising TypeScript should expect to be more helpful. In short, I am describing Visual Studio's intellisense.

But in reality the quality of Typescript's tooling has never appeared to be of much importance to Microsoft and it's still not very good now. Pre-1.0 was practically unusable due to the instability and performance woes that it would inflict upon Visual Studio (by which I mean several crashes per day, often preceded by periods of very high memory usage). The fact that it was ever released in that state is a worry in itself as to how serious Microsoft is about TypeScript, and despite critical issues being fixed now, it's still not really very good:

Visual Studio still requires usually one restart per day to fix performance issues (the dreaded "Formatting task took more than 2 second(s) to complete. Try again later" message - once you start seeing that, some key strokes take 2 seconds).

Occasionally the editor will start reporting non-existent syntax errors and refuse to compile to JS. This is extremely confusing, but it can be fixed by cutting the offending code out of the document, pressing save and letting it recompile, and then pasting it back in. Until you get wise to this, you can spend a lot of time hunting for the (non-existent) cause of the syntax error.

Overall the quality is poor enough that I'm sceptical that TypeScript is getting any real everyday testing/usage by its developers. That would be ok if it was still in alpha state, but it's been public for two years now.

You can, of course, use any editor you like to write TypeScript, but if that's the case you aren't gaining anything over Closure.

There are other annoyances that probably aren't TypeScript's fault. Debugging TypeScript is a bit less pleasant than debugging JavaScript, simply because the browser isn't executing TypeScript. Sourcemaps get you 90% of the way there, but it's still not as smooth as debugging the pure unedited JavaScript as allowed by Closure.

Talk is cheap

Leave a comment:

HTML is not valid. Use:
[url=http://www.google.com]Google[/url] [b]bold[/b] [i]italics[/i] [u]underline[/u] [code]code[/code]