getting started with flow
TRANSCRIPT
Getting started with Flow
@charliedowler
Intro
• Junior Software Engineer @ Hindsight Software
• Working with Backbone, React, ImmutableJS
Typed Javascript
• Elm
• Typescript (Microsoft)
• Dart (Google)
• Flow (Facebook)
What is ?
• “Improvement on Typescript”
• Type checking for your javascript applications
• Catch compile time errors
• Can be introduced with small gradual changes
Why write typed JS using Flow?
• Dynamic + Static typed code can mix
• Scalable
• Maintainable
• Small learning curve
• Compatible with existing vanilla JS and JSX
Unsafe code
function size(str) { return str.length;}
size(null);
// Property length not found on null
Safe codefunction size(str) { if (!str) {
return 0; } return
str.length;}size(null);size(10);
Types• number
• string
• boolean
• void
• mixed
• any
Variables
var $name: string = “Charlie”;
Functions
function getName(): string { return $name;}
function setName(name: string): void { $name = name;}
Classesclass StateMachine { function log(msg: mixed): void; function transition(nextState: string): void;}
class CustomMachine extends StateMachine { constructor() {
this.log(“instance of CustomMachine has been created”); this.transition(StateConstants.READY);}
}
Objectstype User = { id: number, verified: boolean, email: string, firstName: string, lastName: string}
function updateUser(updatedUser: User) { ...}
More typesvar scene: GameScene = new GameScene()
var scene2: typeof scene = GameScene.create()
var name: ?string = nulltype T = Array<string>
var a: T = [“hello” “world”]
Even safer code
function size(str: ?string): number {
return str.length;}
size(2);
if (!str) {retur
n 0;}
// Error: Property number…
Getting started1. Install Flow
2. Prefix your JS file with the /* @flow weak */ annotation
3. Run Flow at the root of your project
@flow weak
• Infers type of unannotated variables as `any`
• Provides a manageable amount of errors to fix
• Ignores unknown modules
Declarations
declare var __dirname: string;
declare function setTimeout(callback: () => void , ms: number): any;
Stub unknown/browser/node methods
Build tools
• gulp-flowtype
• sbt-flow
• grunt-flow
Links
• http://tryflow.org
• https://spyder.wordpress.com/2014/03/16/why-ocaml-why-now
• http://potomushto.com/2015/01/26/facebook-flow-on-server-and-client.html
• https://github.com/Microsoft/TypeScript/issues/1265
@charliedowler
Questions?