Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learning to Love Type Systems

154 views

Published on

Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2B8ZRnf.

Lauren Tan talks about type systems in TypeScript, Flow, and GraphQL that can improve confidence and help ship less bugs to production every day. She starts with why: a practical look at what the benefits are from embracing types. Then, a gentle introduction to the ideas behind them. Finally, she explores the possibilities of a type system over the network. Filmed at qconsf.com.

Lauren Tan is an Engineering Manager at Netflix. Although formally educated in Finance, she's been involved in the crossroads of technology, design, and business for more than a decade. She's also an active contributor to open source, maintaining a number of popular JavaScript and Elixir libraries.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Learning to Love Type Systems

  1. 1. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Learning to Love Type Systems Swipe Left, Uncaught TypeError PRESENTED BY Lauren Tan (she/her) sugarpirate_ poteto Cinemagraph by /u/orbojunglist 💔
  2. 2. InfoQ.com: News & Community Site • Over 1,000,000 software developers, architects and CTOs read the site world- wide every month • 250,000 senior developers subscribe to our weekly newsletter • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • 2 dedicated podcast channels: The InfoQ Podcast, with a focus on Architecture and The Engineering Culture Podcast, with a focus on building • 96 deep dives on innovative topics packed as downloadable emags and minibooks • Over 40 new content items per week Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ type-system-typescript-flow-graphql
  3. 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
  4. 4. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Learning to Love Type Systems Swipe Left, Uncaught TypeError PRESENTED BY Lauren Tan (she/her) sugarpirate_ poteto Cinemagraph by /u/orbojunglist 💔
  5. 5. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  6. 6. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  7. 7. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  8. 8. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError "If debugging is the process of removing software bugs, then programming must be the process of putting them in." Djikstra, supposedly "
  9. 9. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 💩
  10. 10. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Uncaught TypeError, 999 undefined is not a function
  11. 11. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  12. 12. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError TypeScript, <3 TypeScript is a superset of JavaScript that compiles to plain JavaScript
  13. 13. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  14. 14. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Flow, <3 A Static Type Checker for JavaScript
  15. 15. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  16. 16. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError GraphQL, <3 A (typed) query language for your API
  17. 17. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  18. 18. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError LaurenTan
  19. 19. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto
  20. 20. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError "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
  21. 21. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  22. 22. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  23. 23. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError How many ways can this program fail?
  24. 24. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const half = x => x / 2;
  25. 25. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const TEST_CASES = [ null, undefined, Symbol(1), 10, '10', 'hello world', { name: 'Lauren' }, [1, 2, 3], x => x * x ];
  26. 26. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError TEST_CASES.map(testValue => { return { result: half(testValue), test: testValue.toString() } });
  27. 27. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError $$$ not my type!
  28. 28. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  29. 29. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  30. 30. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  31. 31. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  32. 32. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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 ];
  33. 33. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError How many ways can this program fail?
  34. 34. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError How many ways can this program fail? (Infinity)
  35. 35. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const half = (x: number) => x / 2;
  36. 36. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError How many ways can this program fail (at compile time)?
  37. 37. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 0*
  38. 38. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network
  39. 39. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError A Gentle Introduction to Types Why You Should Care About Types
  40. 40. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError A Gentle Introduction to Types Why You Should Care About Types
  41. 41. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError The Basics
  42. 42. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const text1 = 'hello react rally'; const text2: string = 'hello react rally';
  43. 43. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const list1 = [1, 2, 3]; const list2: number[] = [4, 5, 6];
  44. 44. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type ServerStacks = 'canary' | 'beta' | 'production' interface User { id: number; name: string; isAdmin: boolean; }
  45. 45. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeAdmin(user: User) { user.isAdmin = true; return user; }
  46. 46. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeAdmin(user: User) { user.isAdmin = 1; return user; } [ts] Type '1' is not assignable to type 'boolean'. (property) User.isAdmin: boolean
  47. 47. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Generics (Parametric Polymorphism)
  48. 48. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeArray(x: number): number[] { return [x]; } function makeArray(x: string): string[] { return [x]; } function makeArray(x: boolean): boolean[] { return [x]; }
  49. 49. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeArray<T>(x: T): T[] { return [x]; }
  50. 50. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeArray<T>(x: T): T[] { return [x]; }
  51. 51. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeArray<T>(x: T): T[] { return [x]; }
  52. 52. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function makeArray<T>(x: T): T[] { return [x]; }
  53. 53. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError makeArray(1); function makeArray<number>(x: number): number[]
  54. 54. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError makeArray('hello'); function makeArray<string>(x: string): string[]
  55. 55. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  56. 56. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  57. 57. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  58. 58. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  59. 59. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  60. 60. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  61. 61. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError map(x => x * x, [1, 2, 3]); // number[] map(x => x.toUpperCase(), ['hello', 'react', 'rally']); // string[]
  62. 62. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Why Less Is Better Precise Types Means Less Bugs
  63. 63. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Why Less Is Better Precise Types Means Less Bugs
  64. 64. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Learning from Functional Programming https://www.youtube.com/watch?v=ev7AYsLljxk&index=5&list=PL8Ky8lYL8-Oh7awp0sqa82o7Ggt4AGhyf
  65. 65. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  66. 66. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Proof theory Logic Type theory Programs Category theory Algebra
  67. 67. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Curry–Howard–Lambek correspondence
  68. 68. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Stop with the jargon, Lauren
  69. 69. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Stop with the jargon, Lauren
  70. 70. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError declare function Addition(x: number, y: number): number; // proposition function add(x: number, y: number): number { return x + y; } // proof
  71. 71. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  72. 72. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  73. 73. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError What is a function?
  74. 74. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError f : A → B a : A b : Bf
  75. 75. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError an object* of type Ban object* of type A f f :: function from type A to type B * not a JS object
  76. 76. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Types are propositions Programs are proofs Curry-Howard Correspondence
  77. 77. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Let the type system suggest the implementation
  78. 78. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function head<T>(list: T[]): T { // ... }
  79. 79. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function head<T>(list: T[]): T { return list; } [ts] Type 'T[]' is not assignable to type 'T'. (parameter) list: T[]
  80. 80. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function head<T>(list: T[]): T { return list[0]; }
  81. 81. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }
  82. 82. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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[]
  83. 83. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  84. 84. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function map<A, B>(fn: (item: A) => B, items: A[]): B[] { return items.reduce((acc, curr) => { acc.push(fn(curr)); return acc; }, [] as B[]); }
  85. 85. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError myStatelessComponent :: Props -> React.ReactNode
  86. 86. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const MyStatelessComponent: React.SFC<MyProps> = 1; [ts] Type '1' is not assignable to type 'StatelessComponent<MyProps>'. const MyStatelessComponent: React.StatelessComponent<MyProps>
  87. 87. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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>
  88. 88. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const MyStatelessComponent: React.SFC<MyProps> = props => <div> ... </div>;
  89. 89. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Writing better functions
  90. 90. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError f(x) = x2
  91. 91. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 1 2 3 4 5 6 ... 1 4 9 16 25 36 ... Domain Codomain f(x) = x2
  92. 92. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Total vs Partial functions
  93. 93. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Impure & Total Impure & Partial Pure & Total Pure & Partial PartialTotal Impure Pure
  94. 94. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError A partial function is a function that is not defined for all possible input values. Partial
  95. 95. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError const half = x => x / 2;
  96. 96. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;
  97. 97. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;
  98. 98. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;
  99. 99. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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 "
  100. 100. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  101. 101. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;
  102. 102. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;
  103. 103. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Possible Domains Possible Codomains const half = (x: number) => x / 2; number string void object array symbol number NaN Uncaught TypeError
  104. 104. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  105. 105. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError string number void object array symbol Promise<User> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise<User>
  106. 106. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError string number void object array symbol Promise<Either<FetchError, User >> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise<Either<FetchError, User >>
  107. 107. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 108. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type Either<L, A> = Left<L, A> | Right<L, A> It looks like you're trying to use a monad. Would you like help?
  109. 109. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 110. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 111. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 112. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  113. 113. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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))); }
  114. 114. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError async function doIt() { const maybeNoOne = await fetchUser('asdjasjdashjdkahjksd'); maybeNoOne .mapLeft(e => console.log(e.message)); // e: FetchError }
  115. 115. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError [string, string] number void object array symbol Element undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Element | undefined $
  116. 116. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError [string, string] number void object array symbol Option<Element> undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Option<Element>
  117. 117. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type Option<A> = None<A> | Some<A> https://github.com/gcanti/fp-ts
  118. 118. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 119. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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. 120. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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; }
  121. 121. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError firstVisibleElement('.item', '.item-container').map(el => el.getAttribute('data-whatever') // string );
  122. 122. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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))
  123. 123. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  124. 124. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Cardinality cardinality · number of elements of the set
  125. 125. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Lower cardinality = Less bugs*
  126. 126. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Pragmatic Set Theory set · collection of objects
  127. 127. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type Conferences = 'QConSF' | 'dotJS' | 'React Rally';
  128. 128. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError |Conferences| = 3 (not real syntax)
  129. 129. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type Conferences = string;
  130. 130. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError |Conferences| = Infinity (not real syntax)
  131. 131. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Primitive types are not precise
  132. 132. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError |string| = Infinity |number| = Infinity |symbol| = Infinity |boolean| = 2 |null| = 1 |undefined| = 1 (not real syntax)
  133. 133. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError |object| = Infinity (not real syntax)
  134. 134. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Be precise
  135. 135. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function toString<T>(x: T): string { return x.toString(); } toString(undefined); toString(null);
  136. 136. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  137. 137. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString<T>(x: T): string $
  138. 138. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function toString<T>(x: NonNullable<T>): string { return x.toString(); } toString(undefined); toString(null);
  139. 139. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError function toString<T>(x: NonNullable<T>): string { return x.toString(); } toString(undefined); toString(null);
  140. 140. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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 '{}'.
  141. 141. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString<T>(x: NonNullable<T>): string
  142. 142. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError undefined null A: Set of nullable types B A: Set of non-nullable types B: Set of all types string number object symbol array
  143. 143. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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[]
  144. 144. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError 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
  145. 145. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Be pragmatic
  146. 146. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError "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
  147. 147. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Types Over the Network GraphQL, Your New BFF
  148. 148. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Types Over the Network GraphQL, Your New BFF
  149. 149. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError type Project { name: String tagline: String contributors: [User] }
  150. 150. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError { project(name: "GraphQL") { tagline } }
  151. 151. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError { "project": { "tagline": "A query language for APIs" } }
  152. 152. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  153. 153. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  154. 154. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  155. 155. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  156. 156. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  157. 157. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  158. 158. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  159. 159. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  160. 160. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError TypeScript interface GraphQL schema protobuf
  161. 161. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError gRPC Microservice GraphQL Gateway Strongly Typed UI
  162. 162. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  163. 163. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  164. 164. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError
  165. 165. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network
  166. 166. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network
  167. 167. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network
  168. 168. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError sugarpirate_ poteto
  169. 169. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Cinemagraph by /u/fezzo Thank you
  170. 170. QCon SF 2018 Learning to Love Type Systems: Swipe Left, Uncaught TypeError Cinemagraph by /u/fezzo Thank you
  171. 171. Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ type-system-typescript-flow-graphql

×