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

DotJS 2018 - Learning to Love Type Systems

Lauren Tan
November 09, 2018

DotJS 2018 - Learning to Love Type Systems

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. In this talk, learn about the practical benefits you'll get from embracing types. You'll walk away with a better understanding of why type systems help you write better programs, and some functional programming tips you can use today.

Lauren Tan

November 09, 2018
Tweet

More Decks by Lauren Tan

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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




    View Slide

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





    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  99. 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);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide