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.

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