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

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

Comments

[Jozef Sovcik]

Hi, thanks for the post. For future use pls modify it to include @khan/flow-to-ts as original flow-to-ts has been deprecated.