An introduction to Flowtype
Christoffer Niska
Type checking
The benefits
- Boosts confidence
- Increases productivity
- Better end results
Features
Type inference
const item = 'something';
const list = [item];
// is the same as:
const item: string = 'something';
const list: Array<string> = [item];
Flow infers types automatically when you assign values to your variables.
Union types
type Something = string | number | null;
type AllowedActions = IncrementAction | DecrementAction;
Useful when you want define types that accept multiple types.
Generic types
type Action<Type: string, Payload> = {
type: Type,
payload: Payload
};
Useful when you want to define dynamic types that you can reuse.
Demo
Nullable types
const takesOptionalType = (type: ?string) => {
...
}
type Driver = {
rating: ?number
}
Useful when you want to define optional arguments or properties.
any, mixed and *
// anything will flow into any, but you loose type-safety
const takesAnything = (anything: any) => null
// mixed requires you to type-check before using the value
const takesMixed = (something: mixed) => {
if (typeof something === 'string') {
// ...
}
}
// asterisk (*) infers its type
class Driver {
rating: *;
constructor() {
this.rating = 5; // rating becomes a number
}
}
$FlowFixMe
...
// $FlowIgnore
export default connect(/* ... */)(Counter)
You will loose type-safety if you tell Flow to ignore your code.
Easy migration
Editor support
Flow-typed
The caveats
- New technology
- Learning curve
- Point of no return
Questions?
Thank you
Twitter, GitHub: @Crisu83
An introduction to Flowtype
By Christoffer Niska
An introduction to Flowtype
- 621