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

Introduction to Flow

Yuki YAMADA
November 24, 2016

Introduction to Flow

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.