The Airbnb engineering team recently released ts-migrate, a tool to help migrate JavaScript code to TypeScript. While the resulting TypeScript code will compile, manual revision of a few annotations (including // @ts-expect-error, and any) will still be necessary. An automated process may however be more productive than starting from scratch. The Airbnb team reports converting projects with over 50,000 lines of code in one day.
The Airbnb engineering team explained in the release note:
Through our initial process of manual migration to TypeScript, we recognized repeated operations that could be automated. We made codemods for each of these steps and combined them into the overarching migration pipeline.
[…] Based on this pipeline, we created a tool called “ts-migrate”.
The Airbnb engineering team considers that taking a JavaScript or partial TypeScript codebase and migrating it entirely to TypeScript in a single step is a better strategy than migrating partially file by file — TypeScript supports the latter approach through the –allowJS config option.
The team explained that a gradual migration to TypeScript might be a lengthy endeavor when dealing with large codebases, like that of Airbnb. Conversely, an all-in migration strategy guarantees consistency across the project (no mix of JavaScript and TypeScript, so developers don’t need to program in both languages). As a caveat, the team mentioned:
[The all-in strategy will require] to add some
anytypes and@ts-ignorecomments so the project compiles without errors, but over time we can replace them with more descriptive types.
The all-in approach sustained by tooling may also lead to productivity gains. The team reported:
[…] We were able to convert projects with more than 50,000 lines of code and 1,000+ files from JavaScript to TypeScript in one day with the use of codemods!
ts-migrate is designed in a modular fashion and may accept plugins for custom use cases (e.g. type quality improvement, or React props typing). Plugins can be combined into migration configs. ts-migrate ships with two default migration configs (migration and reignore). The second migration config ensures that the project is compilable by ignoring all the generated errors and allows developers to migrate a project now and handle the errors later. The config may prove useful when improving types on third-party libraries, upgrading the TypeScript version or going through a large refactoring.
TypeScript is now the official language of frontend web development at Airbnb. The migration is an on-going effort with 86% of Airbnb frontend codebase (6 million lines of code) being converted to TypeScript. The release reported on the benefits of ts-migrate on the codebase migration as follows:
Using ts-migrate dramatically accelerated our migration process and productivity. Engineers were able to focus on typing improvements.
Brie Bunge, the creator of ts-migrate, reported in a talk at JSConf last year that there were three primary drivers behind the switch to TypeScript: the lower number of bugs making it to production, the improved developer experience, and end-to-end type safety (from back-end to front-end). After conducting a postmortem analysis of bugs, Bunge estimated that 38% of bugs in the Airbnb codebase were preventable with TypeScript. A research study led on a selection of GitHub repositories reported that 15% of bugs may be preventable by using TypeScript.
The release note contains plenty of technical details and miscellaneous information on ts-migrate, and its plugins. Brie Bunge’s talk (Adopting Typescript at Scale) at JSConf goes in detail on the drivers and process that conducted to the adoption of TypeScript at Airbnb.