Now or Never: Migrating 300k LOC from Flow to TypeScript at Quizlet

Roger Goldfinger
Jun 18 · 4 min read

Why change?

We’ve been using Flow to type our Javascript code for the last two years. With 40 engineers working in our web codebase, a good type system goes a long way towards ensuring correctness, orienting new engineers, and enabling safe refactors. Flow was the right choice at the time, and incremental adoption support meant that we could slowly get on board.

Let’s make it happen

Migrating almost 300,000 lines of code seemed a bit much to do manually, so we decided to convert the entire codebase all at once, using a babel plugin to make the syntax changes, and a script to rename files.

Fixing Errors

Of course, there were many TypeScript errors in the migrated codebase — over 6,000 in our case — and we decided to ignore the errors with // @ts-ignore comments to get CI green. After all, the type coverage with Flow was already not catching these errors. Ignoring errors allowed us to complete the migration all in one go rather than freezing the entire codebase while we fixed the errors.

Success

Overall, the migration was quite successful. We’ve increased our type coverage from 66% to 86%, and now have full typing from Redux connectors down through the React component tree. The editor experience in VSCode is much snappier and more reliable, and we continue to find bugs in our code as we fix errors. And most importantly, engineers are starting to trust rather than fight the type system.

  • We should have set clearer expectations for the effort required by product teams in advance, and provided an easy way for teams to know what work they were expected to do and what was remaining during the migration.
  • We should have spent more time ensuring UI Components and other connector code was properly typed beforehand.

Tech @ Quizlet

Inside the team building software for millions of learners

Roger Goldfinger

Written by

Tech @ Quizlet

Inside the team building software for millions of learners