Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 1

Slide 1 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Swipe Left, Uncaught TypeError Learning to Love Type Systems PRESENTED BY Lauren Tan sugarpirate_ poteto Cinemagraph by /u/orbojunglist

Slide 2

Slide 2 text

Slide 3

Slide 3 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 4

Slide 4 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 5

Slide 5 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 6

Slide 6 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems "If debugging is the process of removing software bugs, then programming must be the process of putting them in." Djikstra, supposedly "

Slide 7

Slide 7 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 8

Slide 8 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Uncaught TypeError, 999 undefined is not a function

Slide 9

Slide 9 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 10

Slide 10 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 11

Slide 11 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems TypeScript, <3 TypeScript is a superset of JavaScript that compiles to plain JavaScript

Slide 12

Slide 12 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 13

Slide 13 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Flow, <3 A Static Type Checker for JavaScript

Slide 14

Slide 14 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 15

Slide 15 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems GraphQL, <3 A (typed) query language for your API

Slide 16

Slide 16 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 17

Slide 17 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Lauren Tan

Slide 18

Slide 18 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems sugarpirate_ poteto

Slide 19

Slide 19 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems "A type system is a tractable syntactic method for proving the absence of certain program behaviors by classifying phrases according to the kinds of values they compute." Types and Programming Languages, Benjamin C. Pierce

Slide 20

Slide 20 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 21

Slide 21 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 22

Slide 22 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems How many ways can this program fail?

Slide 23

Slide 23 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const half = x => x / 2;

Slide 24

Slide 24 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const TEST_CASES = [ null, undefined, Symbol(1), 10, '10', 'hello world', { name: 'Lauren' }, [1, 2, 3], x => x * x ];

Slide 25

Slide 25 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems TEST_CASES.map(testValue => { return { result: half(testValue), test: testValue.toString() } });

Slide 26

Slide 26 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems $$$not my type!

Slide 27

Slide 27 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 28

Slide 28 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 29

Slide 29 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 30

Slide 30 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 31

Slide 31 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const TEST_CASES = [ null, // Uncaught TypeError undefined, // Uncaught TypeError Symbol(1), // Uncaught TypeError 10, // 5 '10', // 5 " 'hello world', // NaN { name: 'Lauren' }, // NaN [1, 2, 3], // NaN x => x * x // NaN ];

Slide 32

Slide 32 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems How many ways can this program fail?

Slide 33

Slide 33 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems How many ways can this program fail? (Infinity)

Slide 34

Slide 34 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const half = (x: number) => x / 2;

Slide 35

Slide 35 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems How many ways can this program fail (at compile time)?

Slide 36

Slide 36 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems 0*

Slide 37

Slide 37 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Slide 38

Slide 38 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems A Gentle Introduction to Types Why You Should Care About Types

Slide 39

Slide 39 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems A Gentle Introduction to Types Why You Should Care About Types

Slide 40

Slide 40 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems The Basics

Slide 41

Slide 41 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const text1 = 'hello react rally'; const text2: string = 'hello react rally';

Slide 42

Slide 42 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const list1 = [1, 2, 3]; const list2: number[] = [4, 5, 6];

Slide 43

Slide 43 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type ServerStacks = 'canary' | 'beta' | 'production' interface User { id: number; name: string; isAdmin: boolean; }

Slide 44

Slide 44 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeAdmin(user: User) { user.isAdmin = true; return user; }

Slide 45

Slide 45 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeAdmin(user: User) { user.isAdmin = 1; return user; } [ts] Type '1' is not assignable to type 'boolean'. (property) User.isAdmin: boolean

Slide 46

Slide 46 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Generics (Parametric Polymorphism)

Slide 47

Slide 47 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeArray(x: number): number[] { return [x]; } function makeArray(x: string): string[] { return [x]; } function makeArray(x: boolean): boolean[] { return [x]; }

Slide 48

Slide 48 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeArray(x: T): T[] { return [x]; }

Slide 49

Slide 49 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeArray(x: T): T[] { return [x]; }

Slide 50

Slide 50 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeArray(x: T): T[] { return [x]; }

Slide 51

Slide 51 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function makeArray(x: T): T[] { return [x]; }

Slide 52

Slide 52 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems makeArray(1); function makeArray(x: number): number[]

Slide 53

Slide 53 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems makeArray('hello'); function makeArray(x: string): string[]

Slide 54

Slide 54 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 55

Slide 55 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 56

Slide 56 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 57

Slide 57 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 58

Slide 58 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 59

Slide 59 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 60

Slide 60 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems map(x => x * x, [1, 2, 3]); // number[] map(x => x.toUpperCase(), ['hello', 'react', 'rally']); // string[]

Slide 61

Slide 61 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Why Less Is Better Precise Types Means Less Bugs

Slide 62

Slide 62 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Why Less Is Better Precise Types Means Less Bugs

Slide 63

Slide 63 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Learning from Functional Programming https://www.youtube.com/watch?v=ev7AYsLljxk&index=5&list=PL8Ky8lYL8-Oh7awp0sqa82o7Ggt4AGhyf

Slide 64

Slide 64 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 65

Slide 65 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Proof theory Logic Type theory Programs Category theory Algebra

Slide 66

Slide 66 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Curry–Howard–Lambek correspondence

Slide 67

Slide 67 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Stop with the jargon, Lauren

Slide 68

Slide 68 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Stop with the jargon, Lauren

Slide 69

Slide 69 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems declare function Addition(x: number, y: number): number; // proposition function add(x: number, y: number): number { return x + y; } // proof

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems What is a function?

Slide 73

Slide 73 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems f : A → B a : A b : B f

Slide 74

Slide 74 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems an object* of type B an object* of type A f f :: function from type A to type B * not a JS object

Slide 75

Slide 75 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Types are propositions Programs are proofs Curry-Howard Correspondence

Slide 76

Slide 76 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Let the type system suggest the implementation

Slide 77

Slide 77 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function head(list: T[]): T { // ... }

Slide 78

Slide 78 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function head(list: T[]): T { return list; } [ts] Type 'T[]' is not assignable to type 'T'. (parameter) list: T[]

Slide 79

Slide 79 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function head(list: T[]): T { return list[0]; }

Slide 80

Slide 80 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { // ... }

Slide 81

Slide 81 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { return items; } [ts] Type 'A[]' is not assignable to type 'B[]'. Type 'A' is not assignable to type 'B'. (parameter) items: A[]

Slide 82

Slide 82 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { return fn(items[0]); } [ts] Type 'B' is not assignable to type 'B[]'. (parameter) fn: (item: A) => B

Slide 83

Slide 83 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function map(fn: (item: A) => B, items: A[]): B[] { return items.reduce((acc, curr) => { acc.push(fn(curr)); return acc; }, [] as B[]); }

Slide 84

Slide 84 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems myStatelessComponent :: Props -> React.ReactNode

Slide 85

Slide 85 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const MyStatelessComponent: React.SFC = 1; [ts] Type '1' is not assignable to type 'StatelessComponent'. const MyStatelessComponent: React.StatelessComponent

Slide 86

Slide 86 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const MyStatelessComponent: React.SFC = () => 1; [ts] Type '() => number' is not assignable to type 'StatelessComponent'. Type 'number' is not assignable to type 'ReactElement'. const MyStatelessComponent: React.StatelessComponent

Slide 87

Slide 87 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const MyStatelessComponent: React.SFC = props =>

...

;

Slide 88

Slide 88 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Writing better functions

Slide 89

Slide 89 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems f(x) = x2

Slide 90

Slide 90 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems 1 2 3 4 5 6 ... 1 4 9 16 25 36 ... Domain Codomain f(x) = x2

Slide 91

Slide 91 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Total vs Partial functions

Slide 92

Slide 92 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Impure & Total Impure & Partial Pure & Total Pure & Partial Partial Total Impure Pure

Slide 93

Slide 93 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems A partial function is a function that is not defined for all possible input values. Partial

Slide 94

Slide 94 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems const half = x => x / 2;

Slide 95

Slide 95 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Slide 99

Slide 99 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 100

Slide 100 text

Slide 101

Slide 101 text

Slide 102

Slide 102 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Possible Domains Possible Codomains const half = (x: number) => x / 2; number string void object array symbol number NaN Uncaught TypeError

Slide 103

Slide 103 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems A total function is a function that is defined for all possible values of its input. That is, it terminates and returns a value. Total

Slide 104

Slide 104 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems string number void object array symbol Promise Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise

Slide 105

Slide 105 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems string number void object array symbol Promise> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise>

Slide 106

Slide 106 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Either = Left | Right It looks like you're trying to use a monad. Would you like help?

Slide 107

Slide 107 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Either = Left | Right It looks like you're trying to use a monad. Would you like help?

Slide 108

Slide 108 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems import { Either, left, right } from 'fp-ts/lib/Either'; import fetch from 'node-fetch'; async function fetchUser(username: string): Promise> { const res = await fetch(`https: //api.sugarpirate.com/users/${username}`); if (!res.ok) { return left(new FetchError(`[${res.status}] ${res.statusText}`)) } return right(await res.json()); } https://github.com/gcanti/fp-ts

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

Slide 112

Slide 112 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems async function doIt() { const maybeLauren = await fetchUser('lauren'); const maybeNoOne = await fetchUser('asdjasjdashjdkahjksd'); maybeLauren .map(lauren => lauren.projects) .map(projects => console.log(projects.map(p => p.name))); maybeNoOne .map(noOne => noOne.projects) .map(projects => console.log(projects.map(p => p.name))); }

Slide 113

Slide 113 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems async function doIt() { const maybeNoOne = await fetchUser('asdjasjdashjdkahjksd'); maybeNoOne .mapLeft(e => console.log(e.message)); // e: FetchError }

Slide 114

Slide 114 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems [string, string] number void object array symbol Element undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Element | undefined $

Slide 115

Slide 115 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems [string, string] number void object array symbol Option undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option

Slide 116

Slide 116 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Option = None | Some https://github.com/gcanti/fp-ts

Slide 117

Slide 117 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option { const scrollableElement = document.querySelector(scrollableAreaSelector); if (!scrollableElement) return none; const scrollableBounds = scrollableElement.getBoundingClientRect(); const firstVisibleItem = Array.from(document.querySelectorAll(selector)).find( el => { const elBounds = el.getBoundingClientRect(); const isInViewport = detectInViewport(elBounds, scrollableBounds); return isInViewport && elBounds.top - scrollableBounds.top <= 0; } ); return firstVisibleItem ? some(firstVisibleItem) : none; }

Slide 118

Slide 118 text

Slide 119

Slide 119 text

Slide 120

Slide 120 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems firstVisibleElement('.item', '.item-container').map(el => el.getAttribute('data-whatever') // string );

Slide 121

Slide 121 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems firstVisibleElement('.item', '.item-container').map(el => el.getAttribute('data-whatever') // string ); (method) map(f: (a: Element) => string): Option Takes a function f and an Option of A. Maps f either on None or Some, Option's data constructors. If it maps on Some then it will apply the f on Some's value, if it maps on None it will return None. @example assert.deepEqual(some(1).map(n => n * 2), some(2))

Slide 122

Slide 122 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems import { NoData, Pending, Failure } from './MyPlaceholders'; import { TCustomer } from './MyModel'; type TCustomersList = { entities: RemoteData; }; const CustomersList: React.SFC = ({ entities }) => entities.foldL( () => , () => , err => , data =>

{item.name}

); https://github.com/devex-web-frontend/remote-data-ts

Slide 123

Slide 123 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Cardinality cardinality · number of elements of the set

Slide 124

Slide 124 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Lower cardinality = Less bugs*

Slide 125

Slide 125 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Pragmatic Set Theory set · collection of objects

Slide 126

Slide 126 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Conferences = 'ReactRally' | 'Reactathon' | 'ReactiveConf';

Slide 127

Slide 127 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems |Conferences| = 3 (not real syntax)

Slide 128

Slide 128 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Conferences = string;

Slide 129

Slide 129 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems |Conferences| = Infinity (not real syntax)

Slide 130

Slide 130 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Primitive types are not precise

Slide 131

Slide 131 text

Slide 132

Slide 132 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems |object| = Infinity (not real syntax)

Slide 133

Slide 133 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Be precise

Slide 134

Slide 134 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function toString(x: T): string { return x.toString(); } toString(undefined); toString(null);

Slide 135

Slide 135 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function toString(x: T): string { return x.toString(); } toString(undefined); toString(null); function toString(x: undefined): string function toString(x: null): string

Slide 136

Slide 136 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString(x: T): string $

Slide 137

Slide 137 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function toString(x: NonNullable): string { return x.toString(); } toString(undefined); toString(null);

Slide 138

Slide 138 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function toString(x: NonNullable): string { return x.toString(); } toString(undefined); toString(null);

Slide 139

Slide 139 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems function toString(x: NonNullable): string { return x.toString(); } toString(undefined); toString(null); [ts] Argument of type 'undefined' is not assignable to parameter of type '{}'. [ts] Argument of type 'null' is not assignable to parameter of type '{}'.

Slide 140

Slide 140 text

Slide 141

Slide 141 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems undefined null A: Set of nullable types B \ A: Set of non-nullable types B: Set of all types string number object symbol array

Slide 142

Slide 142 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type NonNullable = T extends null | undefined ? never : T type T34 = NonNullable; // string | number type T35 = NonNullable; // string | string[]

Slide 143

Slide 143 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems type Partial = { [P in keyof T] ?: T[P]; }; type Required = { [P in keyof T]- ?: T[P]; }; type Readonly = { readonly [P in keyof T]: T[P]; }; type Pick = { [P in K]: T[P]; }; type Record = { [P in K]: T; }; type Exclude = T extends U ? never : T; type Extract = T extends U ? T : never; type NonNullable = T extends null | undefined ? never : T; type ReturnType any> = T extends ( ...args: any[]) => infer R ? R : any; https://github.com/Microsoft/TypeScript/blob/v3.0.1/src/lib/es5.d.ts

Slide 144

Slide 144 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Be pragmatic

Slide 145

Slide 145 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems "No matter what language you work in, programming in a functional style provides benefits. You should do it whenever it is convenient, and you should think hard about the decision when it isn't convenient." John Carmack

Slide 146

Slide 146 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Types Over the Network GraphQL, Your New BFF

Slide 147

Slide 147 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Types Over the Network GraphQL, Your New BFF

Slide 148

Slide 148 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 149

Slide 149 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 150

Slide 150 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 151

Slide 151 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 152

Slide 152 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems

Slide 153

Slide 153 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Slide 154

Slide 154 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Slide 155

Slide 155 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Slide 156

Slide 156 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems sugarpirate_ poteto

Slide 157

Slide 157 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Cinemagraph by /u/fezzo Thank you

Slide 158

Slide 158 text

React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love Type Systems Cinemagraph by /u/fezzo Thank you