Tweet
Tweet

Slide 1

Slide 1 text

Migrating from Flow to Typescript on a mono repo project Tomoaki Imai (twitter: @tomoaki_imai, github: @tomoima525) Mobile Engineer @ Chomp

Slide 2

Slide 2 text

HOW GOOD FRIENDS FOOD 2 https://chomp.app/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

HOW GOOD FRIENDS FOOD Mono repo in a nutshell 4 Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)

Slide 5

Slide 5 text

HOW GOOD FRIENDS FOOD Mono repo in a nutshell 5 React-Native Lerna ReactNative 0.57 Babel 6 and 7 Flow typed Apollo(GraphQL)

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

HOW GOOD FRIENDS FOOD Introducing TypeScript

Slide 14

Slide 14 text

HOW GOOD FRIENDS FOOD Introducing TypeScript • Install TypeScript • Setup the root level tsconfig.json, tslint.json • Setup the module level configuration 14

Slide 15

Slide 15 text

HOW GOOD FRIENDS FOOD 15 https://github.com/Microsoft/TypeScript-React-Native-Starter/blob/master/ExampleProject/tsconfig.json /tsconfig.json

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

HOW GOOD FRIENDS FOOD TypeScript with webpack

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

HOW GOOD FRIENDS FOOD babel-loader + ts-loader + tslint-loader 19

Slide 20

Slide 20 text

HOW GOOD FRIENDS FOOD Accessing JS from TS

Slide 21

Slide 21 text

HOW GOOD FRIENDS FOOD Accessing JS from TS 21 • It should work, but … • Generics in Flow was not able to compile(Babel 6 issue?)

Slide 22

Slide 22 text

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 => ✨

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

HOW GOOD FRIENDS FOOD Accessing TS from JS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

HOW GOOD FRIENDS FOOD Let Flow see ts file • Add .ts as module extension 26

Slide 27

Slide 27 text

HOW GOOD FRIENDS FOOD Run tests that have TypeScript • Add ts-jest • Configure jest.config so that it supports both TypeScript and JavaScript 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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