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. “ a system that consists of the development, acquisition, maintenance

    and use of complex systems of communication ” -- from wikipedia
  2. “a formal language that specifies a set of instructions that

    can be used to produce various kinds of output ” -- from wikipedia
  3. Through grammar the set of structural rules governing the composition

    of clauses, phrases, and words in any given natural language -- from wikipedia
  4. 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 }
  5. 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...
  6. 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
  7. When you would (probably) not benefit from a Type System

    » The project is small or very simple » The project will not live for long
  8. 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 )
  9. 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)
  10. 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
  11. 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 }
  12. 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
  13. 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
  14. 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
  15. Structural » A Structural Type System accepts all matching data

    structures » Both Typescript and Flow use a Structural Type System
  16. 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
  17. early 2017 » 500+ files, 35k+ loc » fast growing

    project Goals » Gradual Type introduction » zero/small impact on existent toolchain Choice: Flow
  18. today » 1500+ files, 70k+ loc » after multiple important

    refactor New Goals » Smooth daily coding experience » fast and reliable checks Choice: Typescript
  19. 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)
  20. Setup of new projects » Create React App link »

    Create React App Typescript link » CodeSandbox.io link
  21. 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
  22. Matteo Ronchi Senior Software Engineer at WorkWave FEVR Core Member

    Twitter @cef62 ~ Github @cef62 ___ Thanks! ___ Matteo Ronchi ©2018 -- @cef62