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
Tweet

More Decks by Matteo Ronchi

Other Decks in Programming

Transcript

  1. Why use types
    in Javascript
    Matteo Ronchi ©2018 -- @cef62

    View full-size slide

  2. What is a
    language?

    View full-size slide

  3. “ a system that consists of the development,
    acquisition, maintenance and use of complex systems
    of communication ”
    -- from wikipedia

    View full-size slide

  4. What is a (programming)
    language

    View full-size slide

  5. “a formal language that specifies a set of
    instructions that can be used to produce various
    kinds of output ”
    -- from wikipedia

    View full-size slide

  6. How do we communicate specific
    intentions and nuances?

    View full-size slide

  7. Through grammar
    the set of structural rules governing the composition
    of clauses, phrases, and words in any given natural
    language
    -- from wikipedia

    View full-size slide

  8. 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
    }

    View full-size slide

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

    View full-size slide

  10. Do I need a
    Type System?

    View full-size slide

  11. ... Probably Not ...

    View full-size slide

  12. ... but ... maybe... yes

    View full-size slide

  13. 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

    View full-size slide

  14. When you would (probably)
    not benefit from a Type System
    » The project is small or very simple
    » The project will not live for long

    View full-size slide

  15. Flow vs
    Typescript

    View full-size slide

  16. 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 )

    View full-size slide

  17. 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)

    View full-size slide

  18. Features and syntax
    of both systems are very similar

    View full-size slide

  19. Static typing
    in Javascript 101

    View full-size slide

  20. 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

    View full-size slide

  21. 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
    }

    View full-size slide

  22. Generic Types
    let numbers: Array = []
    numbers.push(34) // valid
    numbers.push('22') // invalid
    let numbers: Array = []
    numbers.push(new Animal()) // valid
    numbers.push(new Car()) // invalid

    View full-size slide

  23. Nominal vs Structural
    Type systems

    View full-size slide

  24. 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

    View full-size slide

  25. 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

    View full-size slide

  26. Structural
    » A Structural Type System accepts all matching data
    structures
    » Both Typescript and Flow use a Structural Type
    System

    View full-size slide

  27. 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

    View full-size slide

  28. My Personal Experience
    and why we moved from Flow to Typescript

    View full-size slide

  29. early 2017
    » 500+ files, 35k+ loc
    » fast growing project
    Goals
    » Gradual Type introduction
    » zero/small impact on existent toolchain
    Choice: Flow

    View full-size slide

  30. today
    » 1500+ files, 70k+ loc
    » after multiple important refactor
    New Goals
    » Smooth daily coding experience
    » fast and reliable checks
    Choice: Typescript

    View full-size slide

  31. 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)

    View full-size slide

  32. Setup of new projects
    » Create React App link
    » Create React App Typescript link
    » CodeSandbox.io link

    View full-size slide

  33. Where to start

    View full-size slide

  34. 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

    View full-size slide

  35. Matteo Ronchi
    Senior Software Engineer at WorkWave
    FEVR Core Member
    Twitter @cef62 ~ Github @cef62
    ___ Thanks! ___
    Matteo Ronchi ©2018 -- @cef62

    View full-size slide