Migrating from Flow to TypeScript on a mono repo project

860bf040d996601213e05747dd661c23?s=47 Tomoaki Imai
February 25, 2019

Migrating from Flow to TypeScript on a mono repo project

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

860bf040d996601213e05747dd661c23?s=128

Tomoaki Imai

February 25, 2019
Tweet

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