Practical Flow Type

Slides presented at gotanda.js

Nobuhide Yayoshi

Transcript

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