Slide 1
Slide 1 text
Why use types
in Javascript
Matteo Ronchi ©2018 -- @cef62
Slide 2
Slide 2 text
What is a
language?
Slide 3
Slide 3 text
“ a system that consists of the development,
acquisition, maintenance and use of complex systems
of communication ”
-- from wikipedia
Slide 4
Slide 4 text
What is a (programming)
language
Slide 5
Slide 5 text
“a formal language that specifies a set of
instructions that can be used to produce various
kinds of output ”
-- from wikipedia
Slide 6
Slide 6 text
How do we communicate specific
intentions and nuances?
Slide 7
Slide 7 text
Through grammar
the set of structural rules governing the composition
of clauses, phrases, and words in any given natural
language
-- from wikipedia
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
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
}
Slide 11
Slide 11 text
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...
Slide 12
Slide 12 text
Do I need a
Type System?
Slide 13
Slide 13 text
... Probably Not ...
Slide 14
Slide 14 text
... but ... maybe... yes
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
When you would (probably)
not benefit from a Type System
» The project is small or very simple
» The project will not live for long
Slide 17
Slide 17 text
Flow vs
Typescript
Slide 18
Slide 18 text
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 )
Slide 19
Slide 19 text
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)
Slide 20
Slide 20 text
Features and syntax
of both systems are very similar
Slide 21
Slide 21 text
Static typing
in Javascript 101
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
}
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Nominal vs Structural
Type systems
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Structural
» A Structural Type System accepts all matching data
structures
» Both Typescript and Flow use a Structural Type
System
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
My Personal Experience
and why we moved from Flow to Typescript
Slide 31
Slide 31 text
early 2017
» 500+ files, 35k+ loc
» fast growing project
Goals
» Gradual Type introduction
» zero/small impact on existent toolchain
Choice: Flow
Slide 32
Slide 32 text
today
» 1500+ files, 70k+ loc
» after multiple important refactor
New Goals
» Smooth daily coding experience
» fast and reliable checks
Choice: Typescript
Slide 33
Slide 33 text
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)
Slide 34
Slide 34 text
Setup of new projects
» Create React App link
» Create React App Typescript link
» CodeSandbox.io link
Slide 35
Slide 35 text
Where to start
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
Matteo Ronchi
Senior Software Engineer at WorkWave
FEVR Core Member
Twitter @cef62 ~ Github @cef62
___ Thanks! ___
Matteo Ronchi ©2018 -- @cef62