typescript migration

typescript-migration.md

Credits to Mike North Sr.Staff Engineer from LinkedIn’s UI Infra team for the inspiration for the stuff below 🙏

What not to do

• functional changes at the same time
• attempt this with low test coverage
• publish your types for consumers while they’re in a weak state

Compiling in lose mode:

• allow implicit any in your tsconfig # TODO show a breif code snippet example of value to change in tsconfig.
• start with tests passing
• careful to avoid changing behavior
• rename all .js to ts
• get tests passing again

Work towards squashing explict any’s …. Incrementally working towards removing explicit any’s

• replace any’s with more appropriate types
• try hard to avoid unsage type casts
• ....once you’ve done that turn on ‘strict mode’ Incrementally
  • strictNullChecks: true,
  • strictFunctionTypes: true

# rename all JSX files in src/ to TSX (reactjs example)
find src -name '*.jsx' -exec bash -c 'git mv "$0" "${0%.jsx}.tsx"' "{}" \;

# rename all JS files in src/ to TS
find src -name '*.js' -exec bash -c 'git mv "$0" "${0%.js}.ts"' "{}" \;

# rename all JSX files in tests/ to TSX
find tests -name '*.jsx' -exec bash -c 'git mv "$0" "${0%.jsx}.tsx"' "{}" \;

# rename all JSX files in tests/__snapshots/ to TSX
find tests -name '*.jsx.snap' -exec bash -c 'git mv "$0" "${0%.jsx.snap}.tsx.snap"' "{}" \;

# rename all JS files in tests/ to TS
find tests -name '*.js' -exec bash -c 'git mv "$0" "${0%.js}.ts"' "{}" \;

when you make these changes

• make sure your on a different branch so its easy to revert/delete changes
• save your progress via commits so its easy to reset your code to a working state