DEV Community

loading...

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

danielhauser profile image Daniel Hauser ・1 min read

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

Discussion (1)

pic
Editor guide
Collapse
sovcik profile image
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.