Swipe Left, Uncaught TypeError: Learning to Love Type Systems

https://www.youtube.com/watch?v=y3uXazpAdwo

Sometimes, undefined is not a function. As mortal programmers, we ship bugs to production everyday. Bugs slow us down, frustrate our users, and cause us to have crises of confidence. Don't go alone–type systems in TypeScript, Flow, and GraphQL can improve your confidence and help you ship less bugs. We'll start with why: a practical look at what you'll get from embracing types. Then, a gentle introduction to the ideas behind them. Finally, we'll explore the possibilities of a type system over the network.

Transcript

1. 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
   
   

   View Slide

2. 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
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 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 "
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 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
    ];
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. 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
    ];
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. 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;
    }
    

    View Slide

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

    View Slide

45. 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
    

    View Slide

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

    View Slide

47. 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]; }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. 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[]
    

    View Slide

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

    View Slide

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

    View Slide

63. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. 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
    

    View Slide

70. 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
    Proposition: If x and y are numbers, a number exists
    

    View Slide

71. 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
    Proposition: If x and y are numbers, a number exists
    Proof: x + y proves that a number exists
    

    View Slide

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

    View Slide

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

    View Slide

74. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. 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[]
    

    View Slide

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

    View Slide

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

    View Slide

81. 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[]
    

    View Slide

82. 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
    

    View Slide

83. 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[]);
    }
    

    View Slide

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

    View Slide

85. 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
    

    View Slide

86. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

90. 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
    

    View Slide

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

    View Slide

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

    View Slide

93. 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
    

    View Slide

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

    View Slide

95. 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;
    

    View Slide

96. 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;
    

    View Slide

97. 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;
    

    View Slide

98. 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;
    half('10') // 5
    half('hello world') // NaN
    "
    

    View Slide

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

    View Slide

100. 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;
     

     View Slide

101. 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;
     

     View Slide

102. 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
     

     View Slide

103. 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
     

     View Slide

104. 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
     

     View Slide

105. 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>
     

     View Slide

106. 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?
     

     View Slide

107. 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?
     

     View Slide

108. 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
     

     View Slide

109. 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
     

     View Slide

110. 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
     

     View Slide

111. 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
     

     View Slide

112. 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)));
     }
     

     View Slide

113. 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
     }
     

     View Slide

114. 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
     $
     

     View Slide

115. 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
     

     View Slide

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

     View Slide

117. 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;
     }
     

     View Slide

118. 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;
     }
     

     View Slide

119. 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;
     }
     

     View Slide

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

     View Slide

121. 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))
     

     View Slide

122. 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 => {data.map(item => {item.name} )}
     );
     https://github.com/devex-web-frontend/remote-data-ts
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

135. 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
     

     View Slide

136. 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
     $
     

     View Slide

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

     View Slide

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

     View Slide

139. 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 '{}'.
     

     View Slide

140. 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: NonNullable): string
     

     View Slide

141. 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
     

     View Slide

142. 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[]
     

     View Slide

143. 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
     

     View Slide

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

     View Slide

145. 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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

153. 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
     

     View Slide

154. 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
     

     View Slide

155. 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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide