Tem um tipo no meu Javascript

Palestra realizada em Teresina/PI durante o Insiter.

Com o advento das SPA (single page apps), o uso do Javascript não se limita apenas a validação de forms e chamadas ajax. Codificar regras de negócio complexas já faz parte do dia a dia de grande parte dos desenvolvedores JS. Mas, a medida que as linhas de código aumentam, como garantir que tudo está funcionando perfeitamente? Nesta talk falarei sobre o Flow e como ele pode ajudar na diminuição de erros de runtime e na definição de tipos específicos de negócio.

Transcript

1. Tem um tipo no meu Javascript
2. Matias Leidemer Software Dev. @ Stickermule http:/ /leidemer.com @matiasleidemer
5. Disclaimer
8. function sum(a, b) { return a + b; } sum(1, 1); 2
9. function sum(a, b) { return a + b; } sum("1", 1); "11"
10. function sum(a, b) { return a + b; } sum({}, []); "[object Object]"
11. Types
12. Static Typing “ In a statically typed language, variables, parameters and members of objects have types that the compiler knows at compile time. The compiler can use that information to perform type checks and to optimize the compiled code. http://2ality.com/2013/09/types.html
13. // Java public class Example { private static Integer sum(Integer a, Integer b) { return a + b; } public static void main(String[] args) { sum(5, "foo"); } } javac Example.java Example.java:7: error: incompatible types: String cannot be converted to Integer sum(5, "foo")
14. Dynamic Typing “ Dynamic type checking is the process of verifying the type safety of a program at runtime. (...) By definition, dynamic type checking may cause a program to fail at runtime. In some programming languages, it is possible to anticipate and recover from these failures. In others, type-checking errors are considered fatal. https://en.wikipedia.org/wiki/Type_system
15. # Ruby def sum(a, b) puts a + b end sum(1, '1') # => TypeError: String can't be coerced into Fixnum # from (irb):3:in `+' # from (irb):3:in `sum' # from (irb):5
16. // Javascript '3' * '4' 12 Number(true) 1 Number('123') 123 String(true) 'true'
18. FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.
19. // @flow function sum(a: number, b: number): number { return a + b; } sum("1", 1); › yarn run flow yarn run v0.21.3 $ "/Users/matias/code/talks/insiter/flow-test/node_modules/.bin/flow" src/01_getting_started.js:7 7: sum("1", 1); ^^^ string. This type is incompatible with the expected param type of 3: function sum(a: number, b: number): number { ^^^^^^ number Found 1 error error Command failed with exit code 2.
20. // @flow function sum(a: number, b: number): number { return a + b; } sum(1, 1); › yarn run flow yarn run v0.21.3 $ "/Users/matias/code/talks/insiter/flow-test/node_modules/.bin/flow" No errors! ✨ Done in 0.21s.
21. Setup
22. yarn add --dev babel-cli babel-preset-flow { "presets": ["flow"] } .babelrc
23. yarn add --dev flow-bin .flowconfig $ flow init ➡
24. .flowconfig [ignore] <PROJECT_ROOT>/lib/.* [include] [libs] [options] $ yarn run flow
25. Type Annotations Primitive Types Literal Types Mixed Types Any Types Maybe Types Variable Types Function Types Object Types Array Types Tuple Types Class Types Type Aliases Interface Types Generic Types Union Types Intersection Types Typeof Types Type Casting Expressions Utility Types Module Types Comment Types
27. Primitives primitives.js
28. Arrays arrays.js
29. Functions functions.js
30. Aliases aliases.js
31. Modules modules.js types.js
32. 3rd Party Code
33. yarn global add flow-typed flow-typed install redux/examples/todos-flow/
34. Business Logic business_logic.js
35. Benefits Simple syntax; Relatively easy to learn; Helps reducing bugs; Helps with business logic; Easy to integrate, even in big projects; Integrates nice with text editors; It's self documenting; Makes maintaining code safer;
37. Links https://flow.org/ https://www.destroyallsoftware.com/talks/wat http://2ality.com/2013/09/types.html https://en.wikipedia.org/wiki/Type_system http://www.adamsolove.com/js/flow/type/2016/04/13/mo deling-with-adts.html http://thejameskyle.com/adopting-flow-and- typescript.html https://github.com/rpl/flow-coverage-report