Why use Types in Javascript

FEVR Meetup

Transcript

1. Why use types in Javascript Matteo Ronchi ©2018 -- @cef62
2. What is a language?
3. “ a system that consists of the development, acquisition, maintenance and use of complex systems of communication ” -- from wikipedia
4. What is a (programming) language
5. “a formal language that specifies a set of instructions that can be used to produce various kinds of output ” -- from wikipedia
6. How do we communicate specific intentions and nuances?
7. Through grammar the set of structural rules governing the composition of clauses, phrases, and words in any given natural language -- from wikipedia
10. Flow control expressions focus on how and when ignoring what if (x > 33) return color if (source !== target) return something switch(type) { case TYPE_A: return something case TYPE_B: return somethingElse }
11. Which options exist? » Flow (static type checker) » Typescript (Javascript superset, compiles to Javascript) » Elm (compiles to Javascript) » Reason (compiles to Javascript and Native code) » Many others...
12. Do I need a Type System?
13. ... Probably Not ...
14. ... but ... maybe... yes
15. When you would benefit from a Type System » You have a large and/or distributed team » People move from/to your team often » Your application have complex data structures and a lot of client-side logic » You plan to (often) refactor your code
16. When you would (probably) not benefit from a Type System » The project is small or very simple » The project will not live for long
17. Flow vs Typescript
18. Flow Focus on Type Soundness » From Facebook [link] » Written in OCaml » Only a Type Checker » Requires Babel or a similar tool to remove its type annotations » Needs an annotation in the files to be checked ( // @flow )
19. Typescript Favors Developer Experience over Soundness » From Microsoft [link] » Written in Typescript » A new language, superset of Javascript (es6/7/8+) » Has its own compiler to transpile and remove type annotations » Files extension must be .ts (.tsx for react)
20. Features and syntax of both systems are very similar
21. Static typing in Javascript 101
22. Type inference let data = 33 data = true // Error, the inferred type is a number // explicit arguments type and inferred return type const sum = (a: number, b: number) => a + b
23. Null Types // `a` must be a valid number, `b` could be undefined const sum = (a: number, b?: number): number | void => { if (b) { return a + b } } const summed: number | void = sum(2, 3) if (summed) { // safely use summed as a number }
24. Generic Types let numbers: Array<number> = [] numbers.push(34) // valid numbers.push('22') // invalid let numbers: Array<Animals> = [] numbers.push(new Animal()) // valid numbers.push(new Car()) // invalid
25. Nominal vs Structural Type systems
26. Nominal » A Nominal Type System expect declared types to Match the value type » C, C++, C# and Java all use a Nominal Type System » Flow use it only for Classes
27. class Animal { name: string } class Horse extends Animal { age: number } class Dog { name: string } const animal: Animal = new Dog() // Error, type doesn't match const animal: Animal = new Horse() // Valid, Horse extends Animal
28. Structural » A Structural Type System accepts all matching data structures » Both Typescript and Flow use a Structural Type System
29. class Animal { name: string } class Horse extends Animal { age: number } class Dog { name: string age: number barf() {} } const animal: Animal = new Dog() // Valid, the classes structure match const animal: Animal = new Horse() // Valid, Horse extends Animal
30. My Personal Experience and why we moved from Flow to Typescript
31. early 2017 » 500+ files, 35k+ loc » fast growing project Goals » Gradual Type introduction » zero/small impact on existent toolchain Choice: Flow
32. today » 1500+ files, 70k+ loc » after multiple important refactor New Goals » Smooth daily coding experience » fast and reliable checks Choice: Typescript
33. IDE/Editor support » vsCode (TS built-in, Flow via plugin) » webStorm (TS built-in, Flow via plugin) » atom (Both via plugin) » sublime (Both via plugin) » vim (Both via plugin)
34. Setup of new projects » Create React App link » Create React App Typescript link » CodeSandbox.io link
35. Where to start
36. Typescript » Marius Schulz link » TypeScript Deep Dive link Flow » The soundcloud clientin react, redux, and flow link » Type checking React and Redux » Secret Flow Types link
37. Matteo Ronchi Senior Software Engineer at WorkWave FEVR Core Member Twitter @cef62 ~ Github @cef62 ___ Thanks! ___ Matteo Ronchi ©2018 -- @cef62