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. 7.

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

    } var a = double("a"); ^ string. The operand of an arithmetic operation must be a number.
  2. 10.

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

    } var a = double(1); a.length;
  3. 11.

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

    } var a = double(1); a.length; ^ property `length` Property not found in Number
  4. 12.

    export type User = { id: number, name: string, followersCount:

    number, postsCount: number, tagline: ?string, imageUuid?: string, };
  5. 14.

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

    -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
  6. 15.

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

    -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
  7. 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);
  8. 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);
  9. 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);
  10. 19.

    function isFollowing( user: { followedTopicsIds: Array<number> }, topic: { id:

    number } ): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }
  11. 20.
  12. 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" />
  13. 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" />
  14. 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() { /* ... */ } }
  15. 25.

    const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT:

    'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>;
  16. 26.

    const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT:

    'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing';
  17. 27.

    const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT:

    'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing';
  18. 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';
  19. 29.
  20. 30.

    Flow vs TypeScript static type checker structural type system no

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