Convert a react app from flow to typescript without losing git history

Daniel Hauser — Wed, 20 Nov 2019 18:35:54 +0000

start with creating a new branch

git checkout -b "moving-from-flow-to-ts"

Rename files from `js` to `ts[x]`

Lets start with renaming all .js files to .ts with the following command:

ls ./src/**/*.js | 
    while read line; do git mv -- $line ${line%.js}.ts; done;

Then, assuming all files importing react are jsx files, rename them from .ts to .tsx

find ./src -type f -name "*.ts" |
    xargs grep 'import React[ ,]' |
    cut -d: -f1 |
    uniq | 
    while read line; do git mv -- $line ${line%.ts}.tsx; done;

Commit to save the new file names

git commit -m "rename js files to ts and tsx"

Move to typescript

Remove flow-bin from package.json

npm uninstall flow-bin

Then, install and initialize typescript

npm install --save-dev typescript @types/react @types/react-dom && tsc --init

Note: If you use decorators, enable the experimentalDecorators flag in tsconfig.json before running the next step

Commit to save the changes

git commit -m "replace flow with typescript"

Convert all flow types to typescript types

Fix types in all tsx files

npx flow-to-ts --inline-utility-types --write -o tsx ./src/**/*.tsx

Fix types in all ts files

npx flow-to-ts --inline-utility-types --write -o ts ./src/**/*.ts

Next step

Run tsc --noEmit to see compilation errors, and fix them manually