Tweet
Tweet

Slide 1

Slide 1 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Learning to Love Type Systems Swipe Left, Uncaught TypeError PRESENTED BY Lauren Tan (she/her) Cinemagraph by /u/orbojunglist

Slide 2

Slide 2 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Learning to Love Type Systems Swipe Left, Uncaught TypeError PRESENTED BY Lauren Tan (she/her) Cinemagraph by /u/orbojunglist

Slide 3

Slide 3 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Bonjour

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Uncaught TypeError, 999 undefined is not a function

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto "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 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto $$$not my type!

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 0*

Slide 30

Slide 30 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Why Less Is Better Precise Types Means Less Bugs Cinemagraph by /u/orbojunglist

Slide 31

Slide 31 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Why Less Is Better Precise Types Means Less Bugs Cinemagraph by /u/orbojunglist

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Proof theory Logic Type theory Programs Category theory Algebra

Slide 35

Slide 35 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Curry–Howard–Lambek correspondence

Slide 36

Slide 36 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Stop with the jargon, Lauren

Slide 37

Slide 37 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Stop with the jargon, Lauren

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto declare function Addition(x: number, y: number): number; // proposition function add(x: number, y: number): number { return x + y; } // proof Proposition: If x and y are numbers, a number exists

Slide 40

Slide 40 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto declare function Addition(x: number, y: number): number; // proposition function add(x: number, y: number): number { return x + y; } // proof Proposition: If x and y are numbers, a number exists Proof: x + y is a proof that a number exists

Slide 41

Slide 41 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto What is a function?

Slide 42

Slide 42 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto f : A → B a : A b : B f

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Types are propositions Programs are proofs Curry-Howard Correspondence ✨

Slide 45

Slide 45 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Let the type system suggest the implementation

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Writing better functions

Slide 50

Slide 50 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto f(x) = x2

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Total vs Partial functions

Slide 53

Slide 53 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Pure & Partial Pure & Total Impure & Partial Impure & Total Total Partial Pure Impure

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2; half('10') // 5 half('hello world') // NaN "

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto type Either = Left | Right It looks like you're trying to use a monad.

Slide 68

Slide 68 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto type Either = Left | Right It looks like you're trying to use a monad.

Slide 69

Slide 69 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 70

Slide 70 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 71

Slide 71 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 72

Slide 72 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 73

Slide 73 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 79

Slide 79 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 80

Slide 80 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 81

Slide 81 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 82

Slide 82 text

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

Slide 83

Slide 83 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 84

Slide 84 text

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

Slide 85

Slide 85 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Lower cardinality = Less bugs*

Slide 86

Slide 86 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Lower cardinality = Less bugs*

Slide 87

Slide 87 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Pragmatic Set Theory set · collection of objects -

Slide 88

Slide 88 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto type Conferences = 'QConSF' | 'dotJS' | 'React Rally';

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto type Conferences = string;

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Primitive types are not precise

Slide 93

Slide 93 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto |string| = Infinity |number| = Infinity |symbol| = Infinity |boolean| = 2 |null| = 1 |undefined| = 1 (not real syntax)

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Be precise

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 102

Slide 102 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString(x: NonNullable): string

Slide 103

Slide 103 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 104

Slide 104 text

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

Slide 105

Slide 105 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto 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 106

Slide 106 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Be pragmatic

Slide 107

Slide 107 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto "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 108

Slide 108 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Cinemagraph by /u/fezzo Merci beaucoup sugarpirate_ poteto

Slide 109

Slide 109 text

dotJS 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto Cinemagraph by /u/fezzo Merci beaucoup sugarpirate_ poteto