Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical Flow Type

5cba4bd1272c9595bd39ec58727ee41e?s=47 yayoc
July 14, 2017

Practical Flow Type

Slides presented at gotanda.js

Nobuhide Yayoshi



July 14, 2017


  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 &

  47. Credits Special thanks to all the people who made and

    released these awesome resources for free: ⊙ Presentation template by SlidesCarnival ⊙ Photographs by Unsplash