Practical Flow Type

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

40. None

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