Typescript Migration Tips

Preparation

Prioritize module that has less "import" so that types for all the dependencies are provided. madge comes in handy on this topic. Generates dependency graph image and start converting from modules in green. One catch is that it doesn't support module resolution so doesn't work well with desktop repo that uses ~/renderer/... for example.

brew install gts
brew install graphviz

npx madge --image graph.svg src # replace src to specific path

Code mod

GitHub - Khan/flow-to-ts: Convert flow code to typescript We have been using the codemod made by KhanAcademy to, more or less painlessly, convert our flow typed javascript files to typescript. Most of the heavy lifting was done with the codemod, but we had to come back and fixes many types / errors. For a quick usage of the codemod, here is how we used it

npx @khanacademy/flow-to-ts --write --delete-source src/**/*.js

This cli also supports --prettier flag which uses prettier as a formatter but it didn't work well for some reasons when we worked on ledgerjs. Make sure to run yarn lint --fix before commit.

Ignore errors

Utilize @ts-expect-error annotation when you cannot figure out how to make TypeScript compiler happy. We can come back and catch these comments on the reviewing process.

@ts-expect-error Describe what error to expect here or reason to ignore

Casting

Sometimes mocked object (often used in test code) doesn't have all the properties defined in its type and compiler throws error where the obj is in use. In that case, utilize type casting instead of @ts-expect-error.

const account = { name: "Account 1" }
const name = getAccountName(account as Account) // <-
expect(name).toBe("Account 1")

Third-Party modules that doesn't come with definition files

Try to find module in https://definitelytyped.org/

yarn add @types/module-name -D

If it doesn't exists, we need to create custom definition file typically under src/@types/.