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.

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