Completing this process now is better than doing so in the future.
Spend some extra time with the first few modules, experimenting with different type checking configurations.We learned that noImplicitAny probably doesn’t pay off, and useUnknownInCatchVariables definitely doesn’t, at least for us. But you can still try to balance cost and benefit. Be ambitious with the type checking: Even if it seems like a humongous job, enable strict, including strictNullChecks.If you’re considering such a migration, we hope that you find the following advice useful: We came out of our experience switching from Flow to TypeScript with a few distinct lessons learned. The coder who is not implementing a fix will just watch, so that the changes will be reviewed by the time they are committed. In this process, one person fixes those errors that affect only types (and can thus be validated by checking that they don’t change the output of the TypeScript compiler), while the other fixes those which require actual code changes. We’ve found it efficient to fix errors in pairs by sharing each other’s screens and going through the errors one by one. Fortunately, fixing them is usually straightforward, although tedious. For large repositories, these can often be counted in the hundreds, or even thousands. Since TypeScript does not support those, they need to be simulated.Īfter this TypeScriptification pipeline is run, it will be time to fix any type errors (TypeScript is much better than Flow at inferring types, so it reports many more errors). So far, we’ve found only one bug, plus a failure to translate an opaque type. Fix eslint errors and pretty-print by running npx eslint –fix.įlow-to-ts does an excellent job at converting type annotations.Use jscodeshift to convert CJS imports to ES6 imports, using transform commonjs-to-es-module-codemod.Use flow-to-ts to convert Flow to TypeScript:įlow-to-ts -write -delete-source `find src test spec -name '*.js'`.Initialize tsconfig.json and tsconfig-lint.json (the difference being that we lint tests and mocks, but we don’t want to include them in the distribution).Use the excellent JSON manipulation package json to update the build, lint, and watch commands, as well as the files and main entries in the project’s package.json.Update our ESLint, GIT, and Jest configurations to work on.Install all TypeScript dependencies, including and our internal ts-config module.Remove all Flow, Babel, and Rollup dependencies and configurations.We included a command in our CLI tools which, when run in the root of any Flow repository, will: This is an annoyance, but has not been a problem so far. The downside is that TypeScriptifying a module now becomes a breaking change, as any require(… ) will have to be transformed into a require(… ).default, and any mocks of the TypeScriptified module in the dependent module will need to return an object like. Here are our current type checking settings, as collected in our internal ts-config module:Īs for module management, we settled for "module": "commonjs", which is the recommended setting for TypeScript on Node, with "esModuleInterop": true to ensure interoperability with existing code.
We did not initially include strictNullChecks, but we have since updated to include it, as the safety it provides is invaluable. In the end, we chose rather strict type checks, while still balancing the strictness with the amount of work required (in other words, the number of type errors that had to be fixed). For two days, four engineers set up the necessary configurations, chose tooling, and converted the first dozen Flow repositories to TypeScript out of the fifty-eight identified as most frequently updated.Īfter the Hack Days, tasks to convert the remaining repositories entered our regular sprint plans and, at the time of writing this post, thirty-eight of those repositories have been converted to TypeScript with no hiccups and great success.Ĭhoosing our tsconfig.json settings required some trial-and-error.
For Mixmax, we followed suit.įollowing a successful experiment conducted as a “10% time” project, we decided to kickstart the migration to TypeScript during our Mixmax Hack Days. In the years since, TypeScript emerged as the community favorite, with many Javascript libraries, frameworks, and tools making the switch. Much of Mixmax's codebase was originally written in Flow, the most popular type-checking Javascript compiler at the time.
0 kommentar(er)
