Incremental Migration to TypeScript on a Flowtype codebase

Resultado de imagem para typescript flowtype
From Flowtype to TypeScript

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