AngularJS + TypeScript = A rich, maintainable front-end webapp plus a few minor headaches.

Note, this post refers to TypeScript 0.8.3, not the newly released version 0.9.0, described here.  

For some background, create an account on https://www.docmunch.com and play around with our table extraction tool.

 What's AngularJS?

Angular is MVC-ish framework for rich, client-side Javascript apps that recently went 1.0 and has the official blessing of Google.  Whereas most webapp programming is imperative (when the value of this field changes then set the value of this other thing to that value), Angular is declarative (tell this other thing to track the value of that field).  There are other great frameworks in this space like EmberJS but a comparison beyond the two is beyond the scope of this article.

What's TypeScript?

TypeScript is a language developed by Microsoft (I know, but trust me, that company is changing in very big ways) which is an extension to ECMAScript 6, but which compiles down to idiomatic ECMAScript 3 or 5, in other words, Javascript. To our mind, the principle benefit of TypeScript is that it adds static, structural typing to Javascript.

So, whats the prehistoric story?

In the time before time, our webapp was a fairly complex beast implemented in CoffeeScript and AngularJS.  It was supported with a Node/Coffee/Express backend.  CoffeeScript is a beautiful seductress who constantly tempts with her concise, Ruby and Python inspired, almost Haskell-level beautiful syntax and promises of untold powers.

However, much like Melisandre, these promises come at a cost. We found ourselves taking short cuts and adding all sorts of state objects to tactically win the battle before us.  What began to happen, especially on the client side, was that this quickly became unmaintainable.  Even with our small team, there were fields that no one was quite sure were needed but no one had the courage to remove.  Adding new features became a delicate dance on a pit of coals.

And the redemption?

I had been following TypeScript closely but never felt it was quite ready for me to take the plunge.  When I discussed it with our contacts at Microsoft the message was pretty clear: "absolutely not!"

Around this time, however, we brought on a lead engineer.  According to him, it was ready to rock and easy to migrate to.  He used it in a previous project, knew his way around the bugs, and could assure us that the generated Javascript was as correct as whatever steaming pile of Typescript we fed the compiler.  He and I are kindred, strong, static-typed spirits coming from the Haskell world so his endorsement pushed me over the edge.

Tools of the the Trade

Boris Yankov's DefinitelyTyped library (https://github.com/borisyankov/DefinitelyTyped) was critical.  It provides TypeScript type definitions for many popular JS frameworks.  Without these, we'd basically be losing all the static typing deliciousness anytime we called a framework function (roughly every other line of code).

We started with just using TypeScript compiler in watch mode `tsc -w`, concatenating all our .ts files into a single .js file which we added to the repo.  Including compiled assets in the repo still kind of bothers me but it did greatly simplify deployment at first.

Eventually we grew out of this and put together a simple Gruntfile which compiled our .less and .ts assets etc etc and that solution seems to be scalable.

Since none of us are on Windows we were using Vim as our editor which meant losing out on the apparently great TypeScript autocompletion in Visual Studio.  Also, the Vim autoindent is messed up for TypeScript and will randomly give lines an extra 10 or levels of indent.  Its not a deal breaker but is a little annoying.

Conclusions

Using TypeScript so far has been a good, not great experience.  Considering that it's prerelease software which came with an "Absolutely Not!" warning from MSFT, we were quite pleased with it and will continue using it for front end development.  Being a superset of Javascript does absolutely facilitate migration.  There are some issues with using TypeScript in Node, in all likelihood stemming from my personal ignorance, which preclude me from being able to comment on that just yet.  Because TypeScript is hosted on CodePlex instead of Github (MSFT hasn't completely changed) there are some frustrations there and dont expect any kind of meaningful, public issue tracking.  Also, the language is still in flux so users should expect code breakages between 0.x releases.  We're looking forward to Generic Typing in 0.9.0 and some improvements that will make Typescript more viable on a NodeJS backend.

YMMV, but for us, TypeScript's small number of warts are far outweighed by yielding even a partial solution to the big, fat, enormous, giant, wart of dynamic typing. 

edit: Someone on Reddit pointed me to https://github.com/clausreinke/typescript-tools Looks like there might be autocompletion in vim aftter all!

If you want to see the product of this work, come sign up at https://www.docmunch.com and use it to extract tabluar data from some PDFs.  Its a feature preview, but we think you'll like it.