Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Flow is a static type checker for JavaScript.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Literal Types Flow can also use literal values as types.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Interface Types

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Q&A