$30 off During Our Annual Pro Sale. View Details »

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.

Radoslav Stankov

December 16, 2016
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. /* @flow */ function double(a) { return a * 2;

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

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

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

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

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

    -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
  7. 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);
  8. 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);
  9. 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);
  10. function isFollowing( user: { followedTopicsIds: Array<number> }, topic: { id:

    number } ): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }
  11. <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" />
  12. <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" />
  13. <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() { /* ... */ } }
  14. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT:

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

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

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

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

    nullable by default no extra language features opt-in
 no runtime cost