Beer.js - Flow

Beer.js - Flow

A lightning presented at Beer.js Sofia about Flow. Flow is static type checker for JavaScript, made by Facebook.

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

December 16, 2016
Tweet

Transcript

  1. Flow Radoslav Stankov 16/12/2016

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

  3. https://github.com/facebook/flow

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

  5. function double(a) { return a * 2; } var a

    = double("a");
  6. /* @flow */ function double(a) { return a * 2;

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

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

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

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

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

    } var a = double(1); a.length; ^ property `length` Property not found in Number
  12. export type User = { id: number, name: string, followersCount:

    number, postsCount: number, tagline: ?string, imageUuid?: string, };
  13. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !==

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

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

    -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
  16. 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);
  17. 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);
  18. 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); const variable: boolean = isFollowing(user, topic);
  19. function isFollowing( user: { followedTopicsIds: Array<number> }, topic: { id:

    number } ): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }
  20. None
  21. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" />

  22. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage

    user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" />
  23. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage

    user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" />
  24. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage

    user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" /> class UserImage extends React.Component { props: {| user: User, width: number, height: number |} | {| user: User, variant: 'big' | 'medium' | 'small' |}; render() { /* ... */ } }
  25. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT:

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

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

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

    'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing'; const italy: Country = 'IT';
  29. None
  30. Flow vs TypeScript static type checker structural type system no

    nullable by default no extra language features opt-in
 no runtime cost
  31. https://github.com/facebook/flow

  32. https://speakerdeck.com/rstankov/beer-dot-js-flow

  33. Thanks