Slide 1
Slide 1 text
Practical
FlowType
@yayoc
Slide 2
Slide 2 text
Hello!
I am
Nobuhide Yayoshi
弥吉修英
You can find me at @yayoc
Frontend engineer, iOS
At Fast Retailing
Slide 3
Slide 3 text
https://flow.org/
Slide 4
Slide 4 text
“ A static type checker for JavaScript
Made By FB
Easy to adopt, easy to leave
Slide 5
Slide 5 text
Why
Type Safety?
⊙ Efficient team development
⊙ Writing code with confident
⊙ Documentable
Slide 6
Slide 6 text
Flow Type for
Redux
Slide 7
Slide 7 text
Actions
Slide 8
Slide 8 text
Action Type
with
Union Type
Slide 9
Slide 9 text
Action Type
Alias
With
Generics
Slide 10
Slide 10 text
Action Type
Alias
With
Generics
Slide 11
Slide 11 text
$Exact
Slide 12
Slide 12 text
Without
$Exact
Slide 13
Slide 13 text
Without
$Exact
Slide 14
Slide 14 text
With
$Exact
Slide 15
Slide 15 text
Reducer
Slide 16
Slide 16 text
Maybe,
Optional
Slide 17
Slide 17 text
Refinements
Slide 18
Slide 18 text
$Exact
Spread
Object
Issue!
http://qiita.com/stomita/items/24a7d223acdc6a8715f4
https://github.com/facebook/flow/issues/2405
Slide 19
Slide 19 text
Flow Type for
Class
Slide 20
Slide 20 text
Model
Promise immutability
Slide 21
Slide 21 text
Model
Promise immutability
[flow] property `username` (user.js:20:7)
Covariant property `username` incompatible with
contravariant use in assignment of property
`username`
Slide 22
Slide 22 text
Model
Promise immutability
Slide 23
Slide 23 text
Actions as
Immutable
Slide 24
Slide 24 text
Flow Type for
React
Component
Slide 25
Slide 25 text
React PropTypes
or
Flow?
Slide 26
Slide 26 text
Components
Prefer using
Generic Style
Slide 27
Slide 27 text
Components
Prefer using
Generic Style
Slide 28
Slide 28 text
Components
Prefer using
Generic Style
Slide 29
Slide 29 text
React
Component
with
$PropertyTypes
Slide 30
Slide 30 text
Adding
Props
With
HOC
Slide 31
Slide 31 text
Adding
Props
With
HOC
Slide 32
Slide 32 text
Adding
Props
With
HOC
Slide 33
Slide 33 text
Error Case
Adding
Props
With
HOC
Slide 34
Slide 34 text
Other tips
Slide 35
Slide 35 text
https://github.com/flowtype/flow-typed
flow-typed install
Third Party
https://github.com/facebook/immutable-js/blob/master/type
-definitions/immutable.js.flow
Finally, Immutable.js supports Flow type in v4.0.0-rc1
Slide 36
Slide 36 text
Flow-coverage-report
https://github.com/rpl/flow-coverage-report
Slide 37
Slide 37 text
Compare
Typescript
if you use Flow, you'll have much higher
type coverage much faster and you'll be
able to sleep soundly.
http://thejameskyle.com/adopting-flow-and-typescript.html
Slide 38
Slide 38 text
Swagger
Flow Type
A Swagger file has
more than 8000 lines
Writing Type Definitions manually is HARD
Slide 39
Slide 39 text
https://github.com/yayoc/swagger-to-flowtype
https://github.com/yayoc/swagger-to-flowtype
https://medium.com/@n_yayoshi/swagger-to-flowtype-generates-flow-type-aliases-8fab67776a4
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
swagger.yaml
Slide 42
Slide 42 text
flowtype.js
Slide 43
Slide 43 text
Conclusion
⊙ Utility types are useful
○ $Exact
○ $PropertyType
○ Class
○ Immutability
⊙ Prefer Flow than Proptypes
⊙ Prefer Generic Component
⊙ swagger-to-flowtype is useful
Slide 44
Slide 44 text
型安全 is Rock
Slide 45
Slide 45 text
We are hiring!!!
Slide 47
Slide 47 text
Credits Special thanks to all the people who
made and released these awesome
resources for free:
⊙ Presentation template by
SlidesCarnival
⊙ Photographs by Unsplash