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

Empowering your React application with Flow type system

Olena Sovyn
December 06, 2019

Empowering your React application with Flow type system

Olena Sovyn

December 06, 2019
Tweet

More Decks by Olena Sovyn

Other Decks in Technology

Transcript

  1. Empowering your React
    application with Flow
    type system
    Olena Sovyn

    @frontendgirl

    View Slide

  2. @frontendgirl

    View Slide

  3. View Slide

  4. Why?

    View Slide

  5. Benefits
    1. No unused properties

    2. Improved refactoring experience

    3. Documentation in place
    @frontendgirl

    View Slide

  6. How?

    View Slide

  7. View Slide

  8. View Slide

  9. What are the rules?

    View Slide

  10. 1. Be as exact as possible

    @frontendgirl

    View Slide

  11. 1. Be as exact as possible

    No error
    Error
    @frontendgirl


    View Slide

  12. 2. Spot “black holes”
    Black holes are functions return values of
    which have type any, even though their
    types can be more specific based on the
    function internal logic

    View Slide

  13. 2. Spot “black holes”

    .
    flowconfig
    No error

    eslint-plugin-flowtype
    @frontendgirl

    View Slide

  14. 3. Use meaningful type names

    @frontendgirl


    View Slide

  15. Let’s do our codebases automagically
    better!
    1. Be as exact as possible

    2. Spot “black holes”

    3. Meaningful type names
    Check also:
    What?
    How?
    Why?
    1. No unused properties

    2. Improved refactoring

    3. Documentation in place
    find and

    follow

    simple

    rules
    @frontendgirl

    http://frontendgirl.com/flow-best-practices/

    View Slide