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

Introduction to Flow

Avatar for Yuki YAMADA Yuki YAMADA
November 24, 2016

Introduction to Flow

Avatar for Yuki YAMADA

Yuki YAMADA

November 24, 2016
Tweet

More Decks by Yuki YAMADA

Other Decks in Programming

Transcript

  1. About me 2 Name: ࢁా ༔ᏻ / Yuki Yamada GitHub:

    @yamadayuki Programming Languages - JavaScript - Ruby - Go
  2. What is Flow? 3 Created by Facebook. Implemented by OCaml.

    Adds static typing to JavaScript to improve developer productivity and code quality https: //github.com/facebook/flow
  3. What is Flow? 4 Created by Facebook. Implemented by OCaml.

    Adds static typing to JavaScript to improve developer productivity and code quality https: //github.com/facebook/flow
  4. Installation 5 Globally… $ npm install -g flow-bin $ yarn

    global add flow-bin $ brew install flow Per Project… $ npm install —save-dev flow-bin $ yarn add —dev flow-bin https: //github.com/facebook/flow#installing-flow
  5. Editor Support 6 - Atom https: //nuclide.io/docs/languages/flow - Visual Studio

    Code https: //github.com/flowtype/flow-for-vscode - Vim https: //github.com/flowtype/vim-flow - Emacs https: //github.com/flowtype/flow-for-emacs
  6. How to use Flow? 7 You need files as below.

    - package.json - .babelrc - .flowconfig
  7. How to use Flow? 8 “package.json” … “devDependencies”: { …

    “babel-plugin-transform-flow-strip-types”: “^6.18.0”,
 “flow-bin”: “^0.36.0”, … }, …
  8. How to use Flow? 9 “.babelrc” … “plugins”: [ …

    [ "transform-flow-strip-types" ], … ], …
  9. How to use Flow? 10 “.flowconfig” [ignore] … [include] ../myProject/.*

    [libs] ./flow-typed ./src/interfaces [options] module.system.node.resolve_dirname=node_modules esproposal.class_static_fields=enable esproposal.class_instance_fields=enable suppress_comment= \\(. \\|\n \\)* \\$FlowFixMe
  10. How to use Flow? 11 In src/add.js … // @flow

    function add(a: number, b: number): number { return a + b; } const three: number = add(‘1’, 2); $ flow check …
  11. Dive into Flow 12 function add(a, b) { return a

    + b; } const three = add(1, 2);
  12. Dive into Flow 13 function add(a, b) { return a

    + b; } const three = add(1, 2); console.log(three); // => 3
  13. Dive into Flow 14 function add(a: number, b: number): number

    { return a + b; } // 3 : number const three: number = add(1, 2); console.log(three); // => 3
  14. Dive into Flow 15 function add(a: number, b: number): number

    { return a + b; } // ’12’ : string const three: number = add(‘1’, 2); console.log(three); // => ‘12’
  15. Dive into Flow 16 $ flow check ↑ `check` command

    prints the result of a full Flow check. function add(a: number, b: number): number { return a + b; } // ’12’ : string const three: number = add(‘1’, 2);
  16. Dive into Flow 17 $ flow check src/add.js:7 7: const

    three = add('1', 2); ^^^^^^^^^^^ function call 7: const three = add('1', 2); ^^^ string. This type is incompatible with 3: function add(a: number, b: number): number { ^^^^^^ number function add(a: number, b: number): number { return a + b; } // ’12’ : string const three: number = add(‘1’, 2);
  17. Conclusion 19 1. Flow is type checker tool. 2. Improve

    the developers’ productivity. 3. Save the quality of code. 4. You can introduce Flow easily.