Pro Yearly is on sale from $80 to $50! »

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.

C8fccffc013096c4b465b50c284a5208?s=128

Lauren Tan

August 17, 2018
Tweet

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
  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
  3. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

    Type Systems
  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 "
  7. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

    Type Systems
  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
  12. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

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

    Type Systems sugarpirate_ poteto
  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
  20. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

    Type Systems const half = x => x / 2;
  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 ];
  25. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

    Type Systems
  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 ];
  32. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

    Type Systems 0*
  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
  38. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

    Type Systems const list1 = [1, 2, 3]; const list2: number[] = [4, 5, 6];
  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; }
  44. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems function makeAdmin(user: User) { user.isAdmin = true; return user; }
  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
  46. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems Generics (Parametric Polymorphism)
  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]; }
  48. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

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

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

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

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

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

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

    Type Systems function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  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[]
  61. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

    Type Systems Why Less Is Better Precise Types Means Less Bugs
  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
  64. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

    Type Systems Stop with the jargon, Lauren
  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
  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
  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
  72. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

    Type Systems f : A → B a : A b : B f
  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
  75. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

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

    Type Systems function map<A, B>(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[]
  82. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems function map<A, B>(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
  83. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems function map<A, B>(fn: (item: A) => B, items: A[]): B[] { return items.reduce((acc, curr) => { acc.push(fn(curr)); return acc; }, [] as B[]); }
  84. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

    Type Systems const MyStatelessComponent: React.SFC<MyProps> = 1; [ts] Type '1' is not assignable to type 'StatelessComponent<MyProps>'. const MyStatelessComponent: React.StatelessComponent<MyProps>
  86. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems const MyStatelessComponent: React.SFC<MyProps> = () => 1; [ts] Type '() => number' is not assignable to type 'StatelessComponent<MyProps>'. Type 'number' is not assignable to type 'ReactElement<any>'. const MyStatelessComponent: React.StatelessComponent<MyProps>
  87. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems const MyStatelessComponent: React.SFC<MyProps> = props => <div> ... </div>;
  88. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

    Type Systems f(x) = x2
  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
  91. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems Total vs Partial functions
  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
  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
  94. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems const half = x => x / 2;
  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;
  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;
  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;
  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 "
  99. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems
  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;
  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;
  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
  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
  104. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems string number void object array symbol Promise<User> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise<User>
  105. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems string number void object array symbol Promise<Either<FetchError, User >> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise<Either<FetchError, User >>
  106. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems type Either<L, A> = Left<L, A> | Right<L, A> It looks like you're trying to use a monad. Would you like help?
  107. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems type Either<L, A> = Left<L, A> | Right<L, A> It looks like you're trying to use a monad. Would you like help?
  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<Either<FetchError, User >> { 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
  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<Either<FetchError, User >> { 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
  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<Either<FetchError, User >> { 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
  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<Either<FetchError, User >> { 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
  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))); }
  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 }
  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 $
  115. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems [string, string] number void object array symbol Option<Element> undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option<Element>
  116. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

    Type Systems export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option<Element> { 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<Element>(firstVisibleItem) : none; }
  118. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option<Element> { 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<Element>(firstVisibleItem) : none; }
  119. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option<Element> { 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<Element>(firstVisibleItem) : none; }
  120. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems firstVisibleElement('.item', '.item-container').map(el => el.getAttribute('data-whatever') // string );
  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<string>(f: (a: Element) => string): Option<string> 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))
  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<TCustomer[]>; }; const CustomersList: React.SFC<TCustomersList> = ({ entities }) => entities.foldL( () => <NoData />, () => <Pending />, err => <Failure error={err} />, data => <ul>{data.map(item => <li>{item.name} </li>)} </ul> ); https://github.com/devex-web-frontend/remote-data-ts
  123. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

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

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

    Type Systems Primitive types are not precise
  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)
  132. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

    Type Systems function toString<T>(x: T): string { return x.toString(); } toString(undefined); toString(null); function toString<undefined>(x: undefined): string function toString<null>(x: null): string
  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<T>(x: T): string $
  137. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

    Type Systems function toString<T>(x: NonNullable<T>): 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 '{}'.
  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<T>(x: NonNullable<T>): string
  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
  142. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems type NonNullable<T> = T extends null | undefined ? never : T type T34 = NonNullable<string | number | undefined>; // string | number type T35 = NonNullable<string | string[] | null | undefined>; // string | string[]
  143. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems type Partial<T> = { [P in keyof T] ?: T[P]; }; type Required<T> = { [P in keyof T]- ?: T[P]; }; type Readonly<T> = { readonly [P in keyof T]: T[P]; }; type Pick<T, K extends keyof T> = { [P in K]: T[P]; }; type Record<K extends keyof any, T> = { [P in K]: T; }; type Exclude<T, U> = T extends U ? never : T; type Extract<T, U> = T extends U ? T : never; type NonNullable<T> = T extends null | undefined ? never : T; type ReturnType<T extends ( ...args: any[]) => any> = T extends ( ...args: any[]) => infer R ? R : any; https://github.com/Microsoft/TypeScript/blob/v3.0.1/src/lib/es5.d.ts
  144. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

    Type Systems Be pragmatic
  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
  146. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

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

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

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

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

    Type Systems
  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
  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
  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
  156. React Rally 2018 Swipe Left, Uncaught TypeError: Learning to Love

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

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

    Type Systems Cinemagraph by /u/fezzo Thank you