Types in Real Life - Speaker Deck

Slide 1

Slide 1 text

Types in Real Life How to improve your dev workflow Sibelius Seraphini

Slide 2

Slide 2 text

Sibelius Seraphini @sibelius @sseraphini 2

Slide 3

Slide 3 text

- Motivation - Basics - Sum types - Generics - REST api study case - React - Redux - Utilities Outline 3

Slide 4

Slide 4 text

Type System in JS 4

Slide 5

Slide 5 text

- Less bugs - More maintainability - Type Driven Development Motivation 5

Slide 6

Slide 6 text

- Better tools support - Code completion - Refactor - Documentation - Jump to definition Motivation 6

Slide 7

Slide 7 text

- Types are set of values - string - 'a' | 'b' | 'c' | ... - number - 1 | 2 | 3 | ... - boolean - true | false - function - string -> boolean | ... - object - { a: string, b: number } | ... What are Types? 7

Slide 8

Slide 8 text

Typing a variable 8

Slide 9

Slide 9 text

Typing a function 9

Slide 10

Slide 10 text

Typing an object 10

Slide 11

Slide 11 text

Nominal Typing 11 - C++, Java, Swift

Slide 12

Slide 12 text

Structural Typing 12 - OCaml, Haskell, Elm

Slide 13

Slide 13 text

Typing an array 13

Slide 14

Slide 14 text

Sum/Union Type 14

Slide 15

Slide 15 text

Intersection Type 15

Slide 16

Slide 16 text

- How to type a function that can be used for any type of array (int[], string[], number[])? Generics 16

Slide 17

Slide 17 text

Generics 17

Slide 18

Slide 18 text

18 Optional type

Slide 19

Slide 19 text

- type the input - api body payload - headers - query string Typing a REST API 19

Slide 20

Slide 20 text

- type the output (response) - Get a json output of a REST api - Transform json to types - https://transform.now.sh/json-to-flo w-types/ Typing a REST API 20

Slide 21

Slide 21 text

Typing a REST api 21

Slide 22

Slide 22 text

Typing a REST api 22

Slide 23

Slide 23 text

Typing a React Component 23

Slide 24

Slide 24 text

Typing a React Component (TS) 24

Slide 25

Slide 25 text

Typing a React Component 25

Slide 26

Slide 26 text

Typing a HOC 26

Slide 27

Slide 27 text

Typing Redux 27

Slide 28

Slide 28 text

Typing Redux 28

Slide 29

Slide 29 text

Typing Redux 29

Slide 30

Slide 30 text

Flow Type Utilities 30

Slide 31

Slide 31 text

TypeScript Utilities Mapped Types 31

Slide 32

Slide 32 text

TypeScript Utilities Conditional Typing 32

Slide 33

Slide 33 text

Resources 33 - https://github.com/entria/guidelines/tree/ master/flow - https://flow.org/en/docs/lang/ - https://www.typescriptlang.org/docs/ho me.html - https://github.com/fantasyland/fantasy-l and - https://github.com/gcanti/flow-static-land

Slide 34

Slide 34 text

Resources 34 - https://medium.com/javascript-scene/m aster-the-javascript-interview-what-is-fu nctional-programming-7f218c68b3a0 - https://medium.com/@matthiasak/state- of-the-union-js-d664bdbffd14 - https://mitpress.mit.edu/books/types-an d-programming-languages - https://github.com/niieani/typescript-vs-fl owtype

Slide 35

Slide 35 text

Resources 35 - https://transform.now.sh/json-to-flow-typ es/

Slide 36

Slide 36 text

I didn't mention 36 - More about Type Theory - Functional Programming - Types + Functional - Fantasy Land specs - Realworld problems and solutions

Slide 37

Slide 37 text

Sibelius