Migrating from Flow to TypeScript on a mono repo project

Tips I learned from migrating a mono repo project to TypeScript from Flow #reactjstokyo

Transcript

1. Migrating from Flow to Typescript on a mono repo project Tomoaki Imai (twitter: @tomoaki_imai, github: @tomoima525) Mobile Engineer @ Chomp
2. HOW GOOD FRIENDS FOOD 2 https://chomp.app/
3. HOW GOOD FRIENDS FOOD Motivation: Why mono repo? • Version consistency • React Native • Apollo(GraphQL) • Share the same libraries/resources among modules/server • assets(images, country codes etc) • graphql, flow types • common logics(e2e test) 3
4. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 4 Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
5. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 5 React-Native Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
6. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 6 React-Native Native Modules symlink Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
7. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 7 React-Native Native Modules Common(JS) symlink symlink Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
8. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 8 client.graphql server.graphql Schema.json type.flow.js(auto-generated) React-Native Native Modules Common(JS) symlink symlink Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
9. HOW GOOD FRIENDS FOOD Motivation: Why TypeScript? • Fixing types for Flow was not improving our productivity • Background Flow type check was not working properly on VSCode • Not strictly typing • Document for TypeScript was better than Flow 9
10. HOW GOOD FRIENDS FOOD Migration Strategy • Start a new project with TypeScript under mono repo • If it goes well, apply TypeScript setup to other projects • Migrate .js code gradually to .ts / .tsx 10
11. HOW GOOD FRIENDS FOOD Mono repo in a nutshell 11 client.graphql server.graphql Schema.json type.flow.js(auto-generated) React-Native Native Modules Common(JS) Web (TypeScript!) symlink symlink Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)
12. HOW GOOD FRIENDS FOOD Migration Step • Introduce TypeScript to mono repo project • Accessing Flow typed module from TypeScript module • Accessing Typescript module from Flow typed module 12
13. HOW GOOD FRIENDS FOOD Introducing TypeScript
14. HOW GOOD FRIENDS FOOD Introducing TypeScript • Install TypeScript • Setup the root level tsconfig.json, tslint.json • Setup the module level configuration 14
15. HOW GOOD FRIENDS FOOD 15 https://github.com/Microsoft/TypeScript-React-Native-Starter/blob/master/ExampleProject/tsconfig.json /tsconfig.json
16. HOW GOOD FRIENDS FOOD 16 https://github.com/Microsoft/TypeScript-React-Native-Starter/blob/master/ExampleProject/tsconfig.json /tsconfig.json /webApps/web-core/tsconfig.json
17. HOW GOOD FRIENDS FOOD TypeScript with webpack
18. HOW GOOD FRIENDS FOOD TypeScript with webpack • Babel7 => Supports TypeScript! • @babel/preset-typescript => ⭕ transpile to JS / ❎ type checking • tslint-loader + ts-loader + babel-loader => 18
19. HOW GOOD FRIENDS FOOD babel-loader + ts-loader + tslint-loader 19
20. HOW GOOD FRIENDS FOOD Accessing JS from TS
21. HOW GOOD FRIENDS FOOD Accessing JS from TS 21 • It should work, but … • Generics in Flow was not able to compile(Babel 6 issue?)
22. HOW GOOD FRIENDS FOOD Accessing JS from TS 22 • Add @babel/preset-flow to TS => Probably works, but not ✨ Joy • Remove Flow types out of JS => Works, but requires code update • Migrating JS to TS => ✨
23. HOW GOOD FRIENDS FOOD • Add tsconfig.json and index.d.ts • Upgrade to Babel7(to support TypeScript by default) • Convert JS Generics to TS Generics 23 Migrating JS to TS
24. HOW GOOD FRIENDS FOOD Accessing TS from JS
25. HOW GOOD FRIENDS FOOD • It should work, but… • Flow can not see .ts file • We can not [ignore] package as TS is symlinked(considered as the same package) 25 Accessing TS from JS
26. HOW GOOD FRIENDS FOOD Let Flow see ts file • Add .ts as module extension 26
27. HOW GOOD FRIENDS FOOD Run tests that have TypeScript • Add ts-jest • Configure jest.config so that it supports both TypeScript and JavaScript 27
28. HOW GOOD FRIENDS FOOD Mono repo with TypeScript 28 client.graphql server.graphql Schema.json type.flow.js(auto-generated) type.ts(auto-generated) React-Native Native Modules Common(JS) Web (TypeScript!) Babel6 -> Babel7 jest -> ts-jest
29. HOW GOOD FRIENDS FOOD Wrap up • Migrating is simple, but there’s some caveats around Flow • Upgrade your Babel version to 7 First! • Don’t look for answers in Stack Over Flow or Github issue. Read error messages and documents carefully 29