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

Type Checking in Javascript with Flow

Type Checking in Javascript with Flow

Developers like coding in JavaScript because it helps them move fast. The language facilitates fast prototyping of ideas via dynamic typing. However, evolving and growing a JavaScript codebase is notoriously challenging. Developers cannot move fast when they break stuff. Flow is a project that adds a layer of types to a JavaScript codebase, and provide tools that use type information to solve the above problems.

Yos Riady

April 02, 2018
Tweet

More Decks by Yos Riady

Other Decks in Programming

Transcript

  1. Type Checking in Javascript
    with Flow
    Yos Riady
    yos.io
    bit.ly/2Gs04qv

    View Slide

  2. Weak types in JS
    What is Flow?
    Introduction Flow Types Tools Conclusion
    Working with Flow Summary and further
    learning
    Tooling for Flow

    View Slide

  3. Javascript is weakly typed
    {
    userName: “Yos”,
    favouriteNumber: 42,
    interests: [“programming”, “swimming”]
    }

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. Flow is a static type checker
    for JavaScript.

    View Slide

  8. Type Annotations
    Specify your intentions as type annotations in code, and Flow will check that
    everything is behaving as expected.

    View Slide

  9. Weak types in JS
    What is Flow?
    Introduction Flow Types Tools Conclusion
    Working with Flow Summary and further
    learning
    Tooling for Flow

    View Slide

  10. Variable Types
    When you declare a new variable, optionally declare its type.

    View Slide

  11. Function Types
    Functions have two places where types are applied: Parameters (input) and the
    return value (output).

    View Slide

  12. Maybe Types
    Maybe types are for places where a value is optional and you can create them by
    adding a question mark in front of the type such as ?string or ?number.

    View Slide

  13. Optional Parameters / Properties
    Functions / objects can have optional parameters / properties where a question
    mark ? comes after the parameter name.

    View Slide

  14. Literal Types
    Flow can also use literal values as types.

    View Slide

  15. Object Types
    You can annotate the properties of an object with types.

    View Slide

  16. Reusable Types with Type Aliases
    When you have complicated types that you want to reuse in multiple places, you
    can alias them in Flow using a type alias.

    View Slide

  17. Union Types
    Sometimes it’s useful to create a type which is one of a set of other types.

    View Slide

  18. Interface Types

    View Slide

  19. Importing and Exporting Types
    You can export type aliases, interfaces, and classes from one file to another.

    View Slide

  20. Weak types in JS
    What is Flow?
    Introduction Flow Types Tools Conclusion
    Working with Flow Summary and further
    learning
    Tooling for Flow

    View Slide

  21. Flow Tooling
    Linter
    Compiler
    You’ll need to setup a compiler
    to strip away Flow types from
    your final code.
    Install Flow per project to
    perform type checking on your
    JS files.

    View Slide

  22. View Slide

  23. Weak types in JS
    What is Flow?
    Introduction Flow Types Tools Conclusion
    Working with Flow Summary and further
    learning
    Tooling for Flow

    View Slide

  24. Type Checking in Javascript
    with Flow
    Yos Riady
    yos.io
    bit.ly/2Gs04qv

    View Slide

  25. Q&A

    View Slide