React: JavaScript to TypeScript files rename

react-js-to-ts-files-rename.md

Rename "js" to "tsx" files with exception to "index.js"|"*.test.js"

find . -type f \( -name "*.js" -and -not -name "*.styles.js" -and -not -name "index.js" -and -not -name "*.test.js" \) -exec sh -c 'mv "$1" "${1%.js}.tsx"' _ {} ;

Rename non "tsx" files to "ts" (index.js | *.styles.js) except *.test.js files

find . -type f \( -name "*.js" -and -not -name "*.test.js" \) -exec sh -c 'mv "$1" "${1%.js}.ts"' _ {} ;

Rename all "js" files containing text "import React from 'react'" to "tsx"

find . -type f \( -name "*.js" \) -exec grep -l "import React" {} ; -exec sh -c 'mv "$1" "${1%.js}.tsx"' _ {} ;

Rename all "js" files containing text "import * as React from 'react'" to "tsx"

find . -type f \( -name "*.js" \) -exec grep -l "import \* as React" {} ; -exec sh -c 'mv "$1" "${1%.js}.tsx"' _ {} ;

If you used Flow you can covert flow files to typescript with the help of flow2ts library: https://github.com/bcherny/flow-to-typescript To convert files that use flow issue following command:

1. At first rename all js files that cointains @flow pragma to flow extension find . -type f \( -name "*.js" \) -exec grep -l "\@flow" {} ; -exec sh -c 'mv "$1" "${1%.js}.flw"' _ {} ;
2. Now convert all flow files to typescript: find . -type f \( -name "*.flow" \) -exec sh -c 'flow2ts "$1" "$1".tsx' _ {} ;

Note: All commands were tested on windows, for linux users you should probably use \; insted of ; at the end of all commands