Beer.js - Flow - Speaker Deck

Slide 1

Slide 1 text

Flow Radoslav Stankov 16/12/2016

Slide 2

Slide 2 text

Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov

Slide 3

Slide 3 text

https://github.com/facebook/ﬂow

Slide 4

Slide 4 text

function double(a) { return a * 2; }

Slide 5

Slide 5 text

function double(a) { return a * 2; } var a = double("a");

Slide 6

Slide 6 text

/* @flow */ function double(a) { return a * 2; } var a = double("a");

Slide 7

Slide 7 text

/* @flow */ function double(a) { return a * 2; } var a = double("a"); ^ string. The operand of an arithmetic operation must be a number.

Slide 8

Slide 8 text

/* @flow */ function double(a) { return a * 2; } var a = double("a");

Slide 9

Slide 9 text

/* @flow */ function double(a) { return a * 2; } var a = double(1);

Slide 10

Slide 10 text

/* @flow */ function double(a) { return a * 2; } var a = double(1); a.length;

Slide 11

Slide 11 text

/* @flow */ function double(a) { return a * 2; } var a = double(1); a.length; ^ property `length` Property not found in Number

Slide 12

Slide 12 text

export type User = { id: number, name: string, followersCount: number, postsCount: number, tagline: ?string, imageUuid?: string, };

Slide 13

Slide 13 text

function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse); const variable: number = isFollowing(user, topic);

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

function isFollowing( user: { followedTopicsIds: Array }, topic: { id: number } ): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

class UserImage extends React.Component { props: {| user: User, width: number, height: number |} | {| user: User, variant: 'big' | 'medium' | 'small' |}; render() { /* ... */ } }

Slide 25

Slide 25 text

const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys;

Slide 26

Slide 26 text

const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys; const missing: Country = 'missing';

Slide 27

Slide 27 text