Introduction to Flow

1. Introduction to Flow Yuki Yamada @yamadayuki
2. About me 2 Name: ࢁా ༔ᏻ / Yuki Yamada GitHub: @yamadayuki Programming Languages - JavaScript - Ruby - Go
3. 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
4. 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
5. 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
6. 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
7. How to use Flow? 7 You need files as below. - package.json - .babelrc - .flowconfig
8. How to use Flow? 8 “package.json” … “devDependencies”: { … “babel-plugin-transform-flow-strip-types”: “^6.18.0”,
 “flow-bin”: “^0.36.0”, … }, …
9. How to use Flow? 9 “.babelrc” … “plugins”: [ … [ "transform-flow-strip-types" ], … ], …
10. 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
11. 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 …
12. Dive into Flow 12 function add(a, b) { return a + b; } const three = add(1, 2);
13. Dive into Flow 13 function add(a, b) { return a + b; } const three = add(1, 2); console.log(three); // => 3
14. 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
15. 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’
16. 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);
17. 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);
18. 18 Demo
19. 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.
20. 20 Thank you for listening