add MIGRATING.md - advice for people migrating from Flow/JS to TS

[swyxio]

update from 2021

you can find the current cheatsheet here: https://react-typescript-cheatsheet.netlify.app/docs/migration/intro

Migrating (to TypeScript) Cheatsheet

This Cheatsheet collates advice and utilities from real case studies of teams moving significant codebases from plain JS or Flow over to TypeScript. It makes no attempt to convince people to do so, but we do collect what few statistics companies offer up after their conversion experience.

⚠️ This Cheatsheet is extremely new and could use all the help we can get. solid advice, results, and up to date content all welcome.

[metricjs]

Millie from Tiny here. I'm not sure if/where you might want to add these but here's some links:

• My slides from ForwardJS: https://www.slideshare.net/tiny/porting-100k-lines-of-code-to-typescript
• An article about our JS -> TS/ES6 conversion written by my team lead just after we did the conversion, which my talk was partly based on: https://go.tiny.cloud/blog/benefits-of-gradual-strong-typing-in-javascript/

I'll have a look through all this and see if there's anything we can add too!

[swyxio]

yay millie! yes i was specifically planning to include your talk once it was up.

i'll add your links, other tips and pointers welcome

[ferdaber]

Slack has also migrated to TypeScript a while ago, I think they were the ones who convinced me to convert :)

https://slack.engineering/typescript-at-slack-a81307fa288d

[braposo]

I've just finished a migration from flow to TS at my company (travelrepublic.co.uk - only part of the mobile site affected) and here are a few things that came out of that work:

• npx flow2ts command to quickly convert files from flow to TS. Doesn't work 100% but it saves some time
• Utility types library (you mention it in the cheatsheet already): https://github.com/piotrwitek/utility-types
• eslint typescript plugin provides the best of both worlds: https://github.com/typescript-eslint/typescript-eslint
• MemSQL use case: https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/
• Entria's incremental migration post (you already mention it) was a big inspiration too. We're using NextJS and configured it to support both flow and TS during the transition.
• Porting from flow to TS can be tricky sometimes and in a few files we almost had to remove all the existing annotations and start from scratch.
• Overall it was a good experience, but most of the time was actually spent fixing the issues that TS was raising and that Flow didn't pick up before.
• HoCs in that aspect were the biggest pain by far.
• There are a few cases of using any to keep the migration going (some were already used in flow) and will be addressed in the future, type coverage is 90% at the moment.

Let me know if you have any questions about it and I'll try to answer them!

[swyxio]

Hey @braposo this is super awesome! I've been meaning to write a clearer/better guide for HOCs. can you give a simple example of a kind of HOC pattern that you struggled with? either just as a standalone TS HOC pain point, or a pain point converting a Flowtyped HOC to a TS HOC.

[ghost]

Today I talked with one of Passable maintainers and he wasn't that happy with flow so he suggested for me to write a typings for passable to improve the Developers experience even in JS files. Maybe one day Passable may adapt TypeScript instead of flow in the source in addition to the package definition 😃

Here's the PR -> fiverr/passable#106

[braposo]

@sw-yx I'll create a new issue to address the HoC, there were already some comments that I wanted to make anyway so I'll just explain a bit more what we are doing.

Thanks! 👍

[swyxio]

alright releasing this thing for now, PR's and issues still welcome for Flow -> TS tips and stories