Large Scale Refactoring with TypeScript

Please note: This article is only available in English.
Large web applications often enter the state of maintenance hell quite early - TypeScript provides an easy way out.

Three years ago I gave a talk titled "TypeScript for Modern Web Development". At that time the web community did not seem very welcoming to the new kid in town. However, to my surprise at the conference the participants of this talk (and also other attendees, with whom I had the opportunity to discuss this matter) have not been two minded about the topic. They recognized the issue TypeScript was addressing and welcomed the solution.

From this point on I felt that the community changed and opened their mind for this solution to an existing and painful problem. Indeed, with great joy I've followed the progress in the recent years where TypeScript gained a lot of momentum and can now be considered the de-facto standard language for doing large-scale type-safe client-side web development.

Honestly, even though I gave this talk (and others) I never had the opportunity to fully utilize it in production. Sometimes the codebase already existed and was not ready for a change, sometimes the development team did not want to make the transition. Very rarely arguments like "this language comes from Microsoft - we don't want this" came up.

Now I would not write another post if that situation wouldn't have changed, would I? Yes, I finally got my hands dirty to prove what TypeScript is really capable of doing. It did not fail me to say the least. We got an application to refactor with half a million lines of (partially very ugly) JavaScript code. The code was using a ES5/ES2015+ mixture. It was already modularized (in some kind) and used Webpack for bundling. As the code did not have proper coverage (~25%) and contained many bugs (400+ known + many hidden) I decided to use TypeScript for making it more robust first.

The whole transition could be done within a week in a team with 3 developers. Of course, we did not add annotations everywhere. Most of the annotations are currently inferred by TypeScript (which is doing an amazing job). So far we've fixed over 9000 errors (true story!), where about 1000+ errors have been serious ones (wrong spelling of properties or methods, invalid parameters, ...). The rest all belongs in the unused (or too many parameters, or optionals missing) sector.

In the long run with more annotations being added we are confident that the application will be already be in a much better state regardless of architecture refactoring (needs to be done in this case as well) or higher code coverage. However, taken the invested time into consideration this change alone has proven to be so valuable that any large-scale development (or refactoring for that matter) of web applications without TypeScript seems like a huge waste of time to me.

Created .


Sharing is caring!