an introduction to
FlowType
Gabriele Petronella
software engineer @ buildo
twitter: @gabro27
Slide 2
Slide 2 text
me, hi!
Slide 3
Slide 3 text
Software engineer at buildo
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
What is Flowtype?
Slide 6
Slide 6 text
DEMO!
Slide 7
Slide 7 text
What is Flowtype?
function add(x, y) {
return x + y;
}
add(2, 3);
add(2, true); // oh, come on!
Slide 8
Slide 8 text
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 ...
Slide 9
Slide 9 text
Static typing
Slide 10
Slide 10 text
SAFETY
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
CLARITY
Slide 13
Slide 13 text
Clarity
function addListener(
event: string,
listener: Function
): EventEmitter;
vs
function addListener(event, listener); // good luck
Slide 14
Slide 14 text
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..
Slide 15
Slide 15 text
but also
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Static typing
in JS (?!)
Slide 18
Slide 18 text
Flowtype "vs" Typescript
It's a bit like React vs Angular.
Different scopes.
Let's see what are we talking about.
Slide 19
Slide 19 text
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...
Slide 20
Slide 20 text
Flowtype "vs" Typescript (cont'd)
Flow is a typechecker.
It doesn't compile to anything, it just typechecks.
Slide 21
Slide 21 text
Flowtype + Babel ~= Typescript
(or at least you can compare them)
and actually
Flowtype + Babel + Webpack ~= Typescript
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Flowtype, get started
npm install -g flow-bin
# per project
flow init
Slide 24
Slide 24 text
Flowtype, get started
(cont'd)
Add the @flow pragma to all the files you want Flow to consider
/* @flow */
const answer = 42; // typechecks!
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
Optionality is the
property of
asymmetric upside
with
correspondingly
limited downside
— Nassim Taleb
Slide 27
Slide 27 text
Easy on-boarding (cont'd)
Flow's type inference is extremely aggressive and you may benefit
from it even without type annotations.
Slide 28
Slide 28 text
DEMO!
Type inference
Slide 29
Slide 29 text
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());
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
DEMO!
any vs mixed
Slide 33
Slide 33 text
any vs mixed
In general, prefer mixed.
Slide 34
Slide 34 text
Composite types
const user: { name: string, age: number } = {
// |-------- the type ---------|
name: 'Gabriele',
age: 27
};
Slide 35
Slide 35 text
Type aliases
type User = { name: string, age: number };
const user: User = { name: 'Gabriele', age: 27 };
function getFriendsOf(user: User): Array {
...
}
Slide 36
Slide 36 text
Quiz!
const names = ['foo', 42];
What's the type of names?
Slide 37
Slide 37 text
Union types
const names = ['foo', 42];
So, what's the type of names?
Answer:
Array
string | number is what we call union type
Slide 38
Slide 38 text
DEMO
Dealing with union types
Slide 39
Slide 39 text
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);
}
Slide 40
Slide 40 text
Quiz!
What's the (inferred) return type of foo?
function foo(x: number) {
if (x > 42) {
return x;
}
}
Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
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.
Slide 43
Slide 43 text
Ok, that seems pretty common...
A | void | null
has a syntax shorthand in Flow
Meet
?A
the nullable type
Slide 44
Slide 44 text
Our final attempt
function foo(x: number): ?number {
if (x > 42) {
return x;
}
}
Slide 45
Slide 45 text
DEMO!
Dealing with nullable types
Slide 46
Slide 46 text
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);
}
Slide 47
Slide 47 text
Adopting Flow
vademecum
Slide 48
Slide 48 text
$FlowFixMe
type User = { name: string };
// $FlowFixMe
const u: User = { foo: 'hey' };
Disables typechecking on the next line
Slide 49
Slide 49 text
weak mode
// @flow weak
less aggressive type inference, useful when starting on a new project.
Slide 50
Slide 50 text
force the hand of the
typecheker
const x: number = 'foo'; // sorry, nope
const y: number = (('foo': any): number); // oh, ok
Slide 51
Slide 51 text
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.
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
A wild demo
appears!
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
Wrap up
• a typechecker, not a language
• powerful type system
• easy to adopt, easy to leave
Slide 56
Slide 56 text
THANK YOU!
Questions?
function speaker(question): ?answer {
// TODO
}
Twitter: @gabro27