Why use Types in Javascript

Slide 1

Slide 1 text

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 speciﬁes 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 speciﬁc 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 beneﬁt 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 beneﬁt 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 ﬁles to be checked ( // @ﬂow )

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 undeﬁned 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+ ﬁles, 35k+ loc » fast growing project Goals » Gradual Type introduction » zero/small impact on existent toolchain Choice: Flow

Slide 32

Slide 32 text

today » 1500+ ﬁles, 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 ﬂow link » Type checking React and Redux » Secret Flow Types link