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

Why use Types in Javascript

Why use Types in Javascript

FEVR Meetup


Matteo Ronchi

January 24, 2018

More Decks by Matteo Ronchi

Other Decks in Programming


  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
  8. None
  9. None
  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

  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