So our goal for the application is to migrate to TypeScript in the Frontend in order to make the experience for developers equal and reduce errors from shifting from one Language to the other. Another reason for us to switch to TypeScript is that we think that typed code helps us to prevent errors in our code before sending it to production — earlier in the compile step. Further more in a large team TypeScript helps "to focus on exposed API rather than having to know all the code by heart" (from Charly Poly; Why use TypeScript, good and bad reasons). There are more reasons but others have written it down better than me, for instance Stefan Baumgartner.
How to start
Build Pipeline and Configuration
First off we set up our build pipeline to compile JS and TS through the default TypeScript compiler
This is a pretty easy step: just set up a default
tsconfig.js file for the project and change your build script to use
The compiler needs to know that you want to compile JS too, so you need to set this up in your configuration. Here is an example configuration.
Here is what I think the most problematic decision is you will face: What is the best part of the codebase to start migrating?
On thing is for sure: You want to start to port one part of the application to TS that is painful for you in your daily work. Maybe with a couple of bugs over the last couple of weeks or months where you think that would not occure if you use a type-safe language. This is exactly what we did. Another decision point for us is that the migration should improve the development experience instantaniously, for example expose a heavily used interface.
Starting Point: State Management
We identified our state mangement including the actions that trigger state changes as a good starting point since the API is had to understand and complicated to read. While porting the existing code we focused on embracing the concept of Action Creators. Using TypeScript we are able to get automatic typing for the payload using a pattern like Peter Kröner describes here. In general Action Creators give us the possibility to decouple binding the dispatch to the action itself and the work that the action does, while updating through reducers.
After the migration of the state management the next steps become easier: We can now start refractoring any React component to use TS instead of JS. For all PropType validations we use TypeScript interfaces to describe the properties. Writing these interfaces becomes much more natural than with PropTypes itself since you are used to writing interfaces by default in TypeScript anyway.
Here is an example:
And with that we are ready to start to translate one component after another to TypeScript. Our goal is to do this while we work on the components anyway. I predict we will take a lot of time to convert our complete codebase to TS but the main aspect is that we are still able to produce and deliver features while working on making the move to TypeScript.
The most important point is to find a starting point for any project, I think. Find something where TypeScript improves your daily work. After mastering the first steps the main work of the migration is done and further steps becomes more and more trivial.
If you had another experience migrating to TypeScript or are still thinking about it, let’s discuss some questions. Contact me via Twitter and I am happy to chat with you.