Flow is a static type checker for JavaScript that helps identify issues and bugs in code. It annotates variables, functions, and components with types to make code faster, smarter, and more scalable. Flow checks code at compile time for type errors rather than at runtime. It supports many type features like literal types, null/void types, maybe types, and union/intersection types. To use Flow, developers add a /* @flow */ comment and install Flow binaries. They can then check for type errors using flow check. Flow aims to catch errors while allowing for gradual adoption, in contrast to TypeScript which requires more annotations.

1. 1

2. Static Type Checking
With Flow JS
By Shivam Latawa

3. What is a Static Type Checker?
• Compile time issues
3
• Annotate variables, functions and components
• Makes you code faster, smarter and scalable

4. JS has a type system
• typeof x
4
• Number
• String
• Boolean
• Object
• Function
• Symbol
• AND …
• Undefined
• Null

5. JS has (runtime) type errors
• _ is not a function
5
• Cannot read property _ of null/undefined

6. What is Flow.js
• Flow is a static type checker for JS
6
• Helps to identify the issues/bugs in your code
• It will change the way you code in JS
• It makes you code smarter, faster and more productive

7. Real time error in code
7

8. How will that look with Flow?
8

9. Features of Flow

10. Types… Literal and Wrapper Types

11. Types… Null and Void Types

12. Types… Maybe Types

13. Types… Optional Object property and Functional parameters

14. Types… Mixed types

15. Types… Any Type

16. Types… Mixed vs Any Type
The difference is the "vice-versa": any can flow into other types
but mixed can not.

17. Types… Mixed vs Any Type
Any supports covariance and contravariance. It’s a super-type and a
subtype of all types.
Mixed supports covariance only. It's a super-type and not a sub type of all
types.

18. Types… Variable Types

19. Types… Array and Tuple Types

20. Types… Class Types

21. Types… Union Types

22. Types… Intersection Types

23. Types… Type Aliases

24. Types… typeof Type

25. Types… Utility Types

26. How to use Flow in your project?
/* @flow */ (add to the top of your file and make your project flow typed
incrementally)
npm install --save-dev flow-bin
npm install -g flow-bin (globally install)
flow init (will generate a .flowconfig file)
flow check (to check for the type errors)

27. Pros
● Code is more likely to work if it compiles, making you more productive
● When adding flowtypes to code it finds bugs
● Feels much safer making changes as a team
● Code is self documenting, makes code more readable
● Add flow gradually to the project.

28. Cons
• New syntax + esnext can be overwhelming

29. Flow vs Typescript
“We built Flow because we didn't see TypeScript going in the right direction
for the community. For example, it purposefully does not attempt to be a
sound type system… …documenting the API using types is useful (in fact
using Flow types you can generate API documentation using
documentation.js). But the point is that you don't need type annotations
everywhere in Flow to get something out of it. The places where you do add
type annotations Flow ends up doing a lot more work for you because it's
able to infer so much. If you aren't telling TypeScript what to do all the time,
it won't do anything for you. With TypeScript 2.0, it is starting to do more of
this, but it has a long way to go to match how much Flow is able to infer.”

30. Conclusions
• JavaScript doesn't give us enough type errors
• Static type checking can help to reduce the bugs in your
application
• Working with types will help you think better

31. References
● https://flow.org/en/docs/
● https://www.lullabot.com/articles/flow-for-static-type-checking-
javascript

32. Questions?

33. THANK YOU
Shivam Latawa
UI Developer, ThoughtWorks
slatawa@thoughtworks.com
@shivam_latawa