TypeScript and real life examples

typescript

Over the Christmas break I had a few emails asking me about TypeScript https://www.typescriptlang.org/ the JavaScript extension invented by Anders Hejlsberg.

So what is TypeScript?

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

So where is TypeScript being used?

Microsoft Team Foundation Server 2012

The TFS team made the decision to convert all of our JavaScript to Typescript. TFS had over 150,000 lines of JavaScript.

The approach... more details at https://blogs.msdn.com/b/bharry/archive/2012/10/24/typescript-a-real-world-story-of-adoption-in-tfs.aspx

As we looked at how to approach the effort of migrating our code, we talked to a few other team at Microsoft who had adopted Typescript before us. One was Erich Gamma's team. Erich estimated that manual conversion, to get fully annoted Typescript, one class/function/line at a time could be done at a rate of 300 or so lines per hour. Of course, all valid JavaScript is valid Typescript so you can just change the file extension and be compiling it but if you want all the benefits you will want to take advantage of some type annotations and that's the manual part. 80,000 lines, at 300 lines per hour was a daunting proposition. So we decided to invest in a tool to help with the process. Thankfully, we had been pretty rigorous in our approach. We used Javadoc fairly consistently to document our APIs. We used consistent patterns for our classes and modules, etc.

All told, it took us (1 dev) less than a week to write a tool (in Typescript, of course, :)) that would recognize Javadoc and the rest of our patterns and convert them to the corresponding Typescript constructs. It took about another week to run the tool, tweak our Javadoc comments (like filling in some that had been missed), update our build process, test the conversion, etc. Of course there's more we can do with Typescript. For instance, we didn't have any previous recognizable pattern for interface contracts - so there was nothing for the tool to use to generate the Typescript constructs. Over time, we'll be going through by hand, as we have reason to revisit modules and further tightening up the Typescript. I expect we'll find more issues that we don't know about now.

Overall, we've been super happy with the result. We feel like we're going to be more productive with better tooling experiences like Intellisense, the code will be better structured, more maintainable and ultimately higher quality. It's been a very good experience and if you've got a sizeable JavaScript codebase.

 

TouchDevelop

If you've not met TouchDevelop before it provides a drag-and-drop scripting environment which, it has now been revealed, has been developed in TypeScript.

The Web App has some amazing features,  including code synthesis and trace+ replay and its a great tools for inspiring school children and beginners to programming. see https://blogs.msdn.com/b/uk_faculty_connection/archive/2012/12/13/touchdevelop-making-apps-for-mobile-devices-on-mobile-devices.aspx

Although TouchDevelop was designed for devices, specifically Windows Phone 7, with touchscreens, it can also be used with a keyboard or a mouse and so the browser-based version probably is an improvement in terms of productivity. It also provides the "work everywhere" element that allows for collaboration; as all the TouchDevelop client apps use the touchdevelop.com cloud service, all of your scripts will get synchronized between all platforms and devices and you only need to log in with the same credentials to access them. TouchDevelop Web App loads automatically on TouchDevelop.com  and, having logged in with your Windows Live, Google or Facebook credentials, you find yourself in the Hub, where can view tutorial videos, visit the showcase to see apps already developed or just get on with creating your own apps in a highly intuitive environment. And once you have created an app you want to publish there are buttons to create a Windows Store app and to create a Windows Phone app.

TypeScript and the opportunity

So with these two great examples I encourage you to give it a try.  You may be surprised at the bugs you find in your JavaScript code even if you've worked hard already to make sure there aren't any.