Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An introduction to Flowtype

An introduction to Flowtype

An introduction to Flowtype, with examples.

Gabriele Petronella

November 26, 2016

More Decks by Gabriele Petronella

Other Decks in Programming


  1. What is Flowtype? function add(x, y) { return x +

    y; } add(2, 3); add(2, true); // oh, come on!
  2. What is Flowtype static typing? function add(x: number, y: number)

    { return x + y; } add(2, 3); // ok! add(2, true); // boolean. This type is incompatible ...
  3. Especially when /** * Adds a listener * @param {string}

    event - The event * @param {string} listener - The listener * @return {object} An EventEmitter */ function addListener(event, listener); // types, nah..
  4. Flowtype "vs" Typescript It's a bit like React vs Angular.

    Different scopes. Let's see what are we talking about.
  5. Flowtype "vs" Typescript (cont'd) Typescript is a language that compiles

    to JS. It has language features that are not present in JS. Examples: enums, visibility modifiers, short-hand constructors...
  6. Flowtype + Babel ~= Typescript (or at least you can

    compare them) and actually Flowtype + Babel + Webpack ~= Typescript
  7. Flowtype "vs" Typescript (cont'd) • Typescript is a lot more

    stable • Typescript cares a lot less about soundness • Typescript's type system is less powerful • Typescript "pushes" you to its own buildchain • Type definitions are vastly more available on Typescript
  8. Flowtype, get started (cont'd) Add the @flow pragma to all

    the files you want Flow to consider /* @flow */ const answer = 42; // typechecks!
  9. Easy on-boarding Since you have to whitelist files, on-boarding is

    really easy. You can tinker with JS, and then progressively make your code base more solid. You have an option, which is very unobstrutive and easy to bail from.
  10. Easy on-boarding (cont'd) Flow's type inference is extremely aggressive and

    you may benefit from it even without type annotations.
  11. Type inference // oh, I see, an array of strings

    const names = [" foo", "bar ", "baz"]; // ah no, an array of strings and numbers names.push(2); // wait, you can't trim a number! names.map(name => name.trim());
  12. Native types So, yes Flow knows about string, number and

    all the other native types you would expect. Also, it ships with typings for the JS standard library and some very common API such as the DOM, Node.js and React.
  13. Special types • mixed is supertype of all types. •

    any type can be used where a mixed is required. • any is both supertype and subtype of all the types • any type can be used where a any is required. • it can fit where anything is required
  14. Composite types const user: { name: string, age: number }

    = { // |-------- the type ---------| name: 'Gabriele', age: 27 };
  15. Type aliases type User = { name: string, age: number

    }; const user: User = { name: 'Gabriele', age: 27 }; function getFriendsOf(user: User): Array<User> { ... }
  16. Union types const names = ['foo', 42]; So, what's the

    type of names? Answer: Array<string | number> string | number is what we call union type
  17. Dealing with union types function getUser(userId: string): Error | User

    { ... } const result = getUser("foo"); if (result instanceof Error) { console.log('AAAAAHHH!'); } else { console.log(result.name); }
  18. Let's try! function foo(x: number): number { if (x >

    42) { return x; } } NOPE! We return number in some cases, but in others we can return undefined.
  19. Let's try again! function foo(x: number): number | void {

    if (x > 42) { return x; } } (void is the type of undefined) YEP! That's the return type.
  20. Ok, that seems pretty common... A | void | null

    has a syntax shorthand in Flow Meet ?A the nullable type
  21. Dealing with nullable types const longName = names.find(name => name.length

    > 20); if (longName) { longName.substring(0, 1); } // or if (longName != null) { longName.substring(0, 1); }
  22. $FlowFixMe type User = { name: string }; // $FlowFixMe

    const u: User = { foo: 'hey' }; Disables typechecking on the next line
  23. force the hand of the typecheker const x: number =

    'foo'; // sorry, nope const y: number = (('foo': any): number); // oh, ok
  24. Third-party modules You have some dependencies right? npm install -g

    flow-typed npm install --save-dev flow-bin flow-typed install It will install every compatible type definition it finds.
  25. Stripping types With Babel npm install -D babel-plugin-transform-flow-strip-types { "plugins":

    ["transform-flow-strip-types"] } With flow-remove-types npm install -g flow-remove-types flow-remove-types src/ --out-dir lib/ flow-node index.js # or run directly
  26. Useful resources • https:/ /flowtype.org/docs/ • https:/ /flowtype.org/try/ • Jeff

    Morrison - A Deepdive into Flow https:/ /www.youtube.com/ watch?v=VEaDsKyDxkY • https:/ /medium.com/@gcanti
  27. Wrap up • a typechecker, not a language • powerful

    type system • easy to adopt, easy to leave