Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Swipe Left, Uncaught TypeError: Learning to Love Type Systems

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.

Lauren Tan

August 17, 2018
Tweet

More Decks by Lauren Tan

Other Decks in Programming

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