Incremental Migration to TypeScript on a Flowtype codebase
We have a lot of code using Flow at Entria.
Moving all the code to TypeScript would be an unfeasible task.
After release of Babel 7 with TypeScript support, this task became possible.
Babel Config
We are going to use Selective Configuration with overridesfeature of Babel 7 to make this happens.
This is our babel config that support both Flowtype and TypeScript code:
Basically, it will compile all .js using @babel/preset-flow and it will compile all .ts files using @babel/preset-typescript
We also modified our Babel build script to include .js and .ts extensions to make all .ts files compiled to .js
Migration Path
Rename a JavaScript file extensions from .js to .ts
Remove @flow comment
Run tsc to typecheck all .ts files
Fix all type errors
Profit
Migration on React Native
On React Native 56/57 you can follow the same idea to customize babel.config.js to migrate incrementally your React Native App
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
Migrate on React
Wait all ecosystem to upgrade to babel 7
Migrate to babel 7 and use the same idea from above
React-hot-loader still does not support it https://github.com/gaearon/react-hot-loader/issues/1043, but it will soon \o/
Migrate on Jest
For Jest work with Typescript and Flow you just need to change transform and testRegex and moduleFileExtensions . No need for ts-jest anymore
Migrate on Lint Staged
Add specific rules for .js files and for .ts files.
Migrate on Eslint
You need to disable error when importing .ts files from another files without .ts extension, using import/extensions rule
You also need eslint-import-resolver-typescript to make eslint import resolver happy
We are playing with monorepo as well, we gonna migrate our playground to TS as well https://github.com/entria/entria-fullstack, watch the repo to check the our migration path there.
If you want to know more about playground check this blog post:
https://medium.com/@sibelius/why-your-company-should-have-an-open-source-playground-4bb93068ce95
If you need any help migration, let me know https://twitter.com/sseraphini
Newsletter
Subscribe to my newsletter for new content https://sibelius.substack.com/
