milano js meetup - gabriele petronella - codemotion milan 2016

me, hi!

Software engineer at buildo

What is Flowtype?

DEMO!

What is Flowtype?function add(x, y) { return x + y;}add(2, 3);add(2, true); // oh, come on!

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

Static typing

SAFETY

CLARITY

Clarityfunction addListener( event: string, listener: Function): EventEmitter;

vs

function addListener(event, listener); // good luck

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

but also

Static typingin JS (?!)

Flowtype "vs" TypescriptIt's a bit like React vs Angular.

Different scopes.

Let's see what are we talking about.

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

Flowtype "vs" Typescript (cont'd)Flow is a typechecker.

It doesn't compile to anything, it just typechecks.

Flowtype + Babel ~= Typescript(or at least you can compare them)

and actually

Flowtype + Babel + Webpack ~= Typescript

Flowtype "vs" Typescript (cont'd)Type systems facts:

• Typescript is a lot more stable• Typescript cares a lot less about soundness• Typescript's type system is less powerful

Flowtype, get startednpm install -g flow-bin

# per projectflow init

Flowtype, get started (cont'd)Add the @flow pragma to all the files you want Flow to consider

/* @flow */const answer = 42; // typechecks!

Easy on-boardingSince 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.

Optionality is the property of asymmetric upside with correspondingly limited downside— Nassim Taleb

Easy on-boarding (cont'd)Flow's type inference is extremely aggressive and you may benefit from it even without type annotations.

DEMO!Type inference

Type inference// oh, I see, an array of stringsconst names = [" foo", "bar ", "baz"];

// ah no, an array of strings and numbersnames.push(2);

// wait, you can't trim a number!names.map(name => name.trim());

Native typesSo, 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.

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

DEMO!any vs mixed

any vs mixedIn general, prefer mixed.

Composite typesconst user: { name: string, age: number } = {// |-------- the type ---------| name: 'Gabriele', age: 27};

Type aliasestype User = { name: string, age: number };

const user: User = { name: 'Gabriele', age: 27 };

function getFriendsOf(user: User): Array<User> { ...}

Quiz!const names = ['foo', 42];

What's the type of names?

Union typesconst names = ['foo', 42];

So, what's the type of names?

Answer:

Array<string | number>

string | number is what we call union type

DEMODealing with union types

Dealing with union typesfunction getUser(userId: string): Error | User { ... }const result = getUser("foo");

if (result instanceof Error) { console.log('AAAAAHHH!');} else { console.log(result.name);}

Quiz!What's the (inferred) return type of foo?

function foo(x: number) { if (x > 42) { return x; }}

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.

Let's try again!function foo(x: number): number | typeof undefined { if (x > 42) { return x; }}

(undefined is a value, typeof undefined is its type)

YEP! That's the return type.

Ok, that seems pretty common...A | typeof undefined | null

has a syntax shorthand in Flow

Meet

?Athe nullable type

Our final attemptfunction foo(x: number): ?number { if (x > 42) { return x; }}

DEMO!Dealing with nullable types

Dealing with nullable typesconst longName = names.find(name => name.length > 20);if (longName) { longName.substring(0, 1);}

// orif (longName != null) { longName.substring(0, 1);}

Demo

Adopting Flowvademecum

$FlowFixMetype User = { name: string };// $FlowFixMeconst u: User = { foo: 'hey' };

Disables typechecking on the next line

weak mode// @flow weak

less aggressive type inference, useful when starting on a new project.

force the hand of the typechekerconst x: number = 'foo'; // sorry, nopeconst y: number = (('foo': any): number); // oh, ok

Third-party modulesYou have some dependencies right?

npm install -g flow-typednpm install --save-dev flow-binflow-typed install

It will install every compatible type definition it finds.

Stripping typesWith Babel

npm install -D babel-plugin-transform-flow-strip-types

{ "plugins": ["transform-flow-strip-types"] }

With flow-remove-types

npm install -g flow-remove-typesflow-remove-types src/ --out-dir lib/flow-node index.js # or run directly

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

Wrap up• a typechecker, not a language• powerful type system• easy to adopt, easy to leave

THANK YOU!Questions?function speaker(question): ?answer { // TODO}

Twitter: @gabro27