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

Practical Flow Type

yayoc
July 14, 2017

Practical Flow Type

Slides presented at gotanda.js

Nobuhide Yayoshi

yayoc

July 14, 2017
Tweet

More Decks by yayoc

Other Decks in Programming

Transcript

  1. Practical
    FlowType
    @yayoc

    View Slide

  2. Hello!
    I am
    Nobuhide Yayoshi
    弥吉修英
    You can find me at @yayoc
    Frontend engineer, iOS
    At Fast Retailing

    View Slide

  3. https://flow.org/

    View Slide

  4. “ A static type checker for JavaScript
    Made By FB
    Easy to adopt, easy to leave

    View Slide

  5. Why
    Type Safety?
    ⊙ Efficient team development
    ⊙ Writing code with confident
    ⊙ Documentable

    View Slide

  6. Flow Type for
    Redux

    View Slide

  7. Actions

    View Slide

  8. Action Type
    with
    Union Type

    View Slide

  9. Action Type
    Alias
    With
    Generics

    View Slide

  10. Action Type
    Alias
    With
    Generics

    View Slide

  11. $Exact

    View Slide

  12. Without
    $Exact

    View Slide

  13. Without
    $Exact

    View Slide

  14. With
    $Exact

    View Slide

  15. Reducer

    View Slide

  16. Maybe,
    Optional

    View Slide

  17. Refinements

    View Slide

  18. $Exact
    Spread
    Object
    Issue!
    http://qiita.com/stomita/items/24a7d223acdc6a8715f4
    https://github.com/facebook/flow/issues/2405

    View Slide

  19. Flow Type for
    Class

    View Slide

  20. Model
    Promise immutability

    View Slide

  21. Model
    Promise immutability
    [flow] property `username` (user.js:20:7)
    Covariant property `username` incompatible with
    contravariant use in assignment of property
    `username`

    View Slide

  22. Model
    Promise immutability

    View Slide

  23. Actions as
    Immutable

    View Slide

  24. Flow Type for
    React
    Component

    View Slide

  25. React PropTypes
    or
    Flow?

    View Slide

  26. Components
    Prefer using
    Generic Style

    View Slide

  27. Components
    Prefer using
    Generic Style

    View Slide

  28. Components
    Prefer using
    Generic Style

    View Slide

  29. React
    Component
    with
    $PropertyTypes

    View Slide

  30. Adding
    Props
    With
    HOC

    View Slide

  31. Adding
    Props
    With
    HOC

    View Slide

  32. Adding
    Props
    With
    HOC

    View Slide

  33. Error Case
    Adding
    Props
    With
    HOC

    View Slide

  34. Other tips

    View Slide

  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

    View Slide

  36. Flow-coverage-report
    https://github.com/rpl/flow-coverage-report

    View Slide

  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

    View Slide

  38. Swagger
    Flow Type
    A Swagger file has
    more than 8000 lines
    Writing Type Definitions manually is HARD

    View Slide

  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

    View Slide

  40. View Slide

  41. swagger.yaml

    View Slide

  42. flowtype.js

    View Slide

  43. Conclusion
    ⊙ Utility types are useful
    ○ $Exact
    ○ $PropertyType
    ○ Class
    ○ Immutability
    ⊙ Prefer Flow than Proptypes
    ⊙ Prefer Generic Component
    ⊙ swagger-to-flowtype is useful

    View Slide

  44. 型安全 is Rock

    View Slide

  45. We are hiring!!!

    View Slide

  46. Thanks!
    Any questions?
    You can find me at @yayoc &
    [email protected]

    View Slide

  47. Credits Special thanks to all the people who
    made and released these awesome
    resources for free:
    ⊙ Presentation template by
    SlidesCarnival
    ⊙ Photographs by Unsplash

    View Slide