Swipe Left, Uncaught TypeError: Learning to Love Type Systems

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

Type Systems

Type Systems "If debugging is the process of removing software bugs, then programming must be the process of putting them in." Djikstra, supposedly "

Type Systems

Type Systems Uncaught TypeError, 999 undefined is not a function

Type Systems

Type Systems TypeScript, <3 TypeScript is a superset of JavaScript that compiles to plain JavaScript

Type Systems

Type Systems Flow, <3 A Static Type Checker for JavaScript

Type Systems

Type Systems GraphQL, <3 A (typed) query language for your API

Type Systems

Type Systems Lauren Tan

Type Systems sugarpirate_ poteto

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

Type Systems

Type Systems How many ways can this program fail?

Type Systems const half = x => x / 2;

Type Systems const TEST_CASES = [ null, undefined, Symbol(1), 10, '10', 'hello world', { name: 'Lauren' }, [1, 2, 3], x => x * x ];

Type Systems TEST_CASES.map(testValue => { return { result: half(testValue), test: testValue.toString() } });

Type Systems $$$not my type!

Type Systems

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

Type Systems How many ways can this program fail?

Type Systems How many ways can this program fail? (Infinity)

Type Systems const half = (x: number) => x / 2;

Type Systems How many ways can this program fail (at compile time)?

Type Systems 0*

Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Type Systems A Gentle Introduction to Types Why You Should Care About Types

Type Systems The Basics

Type Systems const text1 = 'hello react rally'; const text2: string = 'hello react rally';

Type Systems const list1 = [1, 2, 3]; const list2: number[] = [4, 5, 6];

Type Systems type ServerStacks = 'canary' | 'beta' | 'production' interface User { id: number; name: string; isAdmin: boolean; }

Type Systems function makeAdmin(user: User) { user.isAdmin = true; return user; }

Type Systems function makeAdmin(user: User) { user.isAdmin = 1; return user; } [ts] Type '1' is not assignable to type 'boolean'. (property) User.isAdmin: boolean

Type Systems Generics (Parametric Polymorphism)

Type Systems function makeArray(x: number): number[] { return [x]; } function makeArray(x: string): string[] { return [x]; } function makeArray(x: boolean): boolean[] { return [x]; }

Type Systems function makeArray<T>(x: T): T[] { return [x]; }

Type Systems makeArray(1); function makeArray<number>(x: number): number[]

Type Systems makeArray('hello'); function makeArray<string>(x: string): string[]

Type Systems function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }

Type Systems map(x => x * x, [1, 2, 3]); // number[] map(x => x.toUpperCase(), ['hello', 'react', 'rally']); // string[]

Type Systems Why Less Is Better Precise Types Means Less Bugs

Type Systems Learning from Functional Programming https://www.youtube.com/watch?v=ev7AYsLljxk&index=5&list=PL8Ky8lYL8-Oh7awp0sqa82o7Ggt4AGhyf

Type Systems

Type Systems Proof theory Logic Type theory Programs Category theory Algebra

Type Systems Curry–Howard–Lambek correspondence

Type Systems Stop with the jargon, Lauren

Type Systems declare function Addition(x: number, y: number): number; // proposition function add(x: number, y: number): number { return x + y; } // proof

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

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

Type Systems What is a function?

Type Systems f : A → B a : A b : B f

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

Type Systems Types are propositions Programs are proofs Curry-Howard Correspondence

Type Systems Let the type system suggest the implementation

Type Systems function head<T>(list: T[]): T { // ... }

Type Systems function head<T>(list: T[]): T { return list; } [ts] Type 'T[]' is not assignable to type 'T'. (parameter) list: T[]

Type Systems function head<T>(list: T[]): T { return list[0]; }

Type Systems function map<A, B>(fn: (item: A) => B, items: A[]): B[] { // ... }

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

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

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[]); }

Type Systems myStatelessComponent :: Props -> React.ReactNode

Type Systems const MyStatelessComponent: React.SFC<MyProps> = 1; [ts] Type '1' is not assignable to type 'StatelessComponent<MyProps>'. const MyStatelessComponent: React.StatelessComponent<MyProps>

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>

Type Systems const MyStatelessComponent: React.SFC<MyProps> = props => <div> ... </div>;

Type Systems Writing better functions

Type Systems f(x) = x2

Type Systems 1 2 3 4 5 6 ... 1 4 9 16 25 36 ... Domain Codomain f(x) = x2

Type Systems Total vs Partial functions

Type Systems Impure & Total Impure & Partial Pure & Total Pure & Partial Partial Total Impure Pure

Type Systems A partial function is a function that is not defined for all possible input values. Partial

Type Systems const half = x => x / 2;

Type Systems number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;

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 "

Type Systems

Type Systems number string void object array symbol number NaN Uncaught TypeError Possible Domains Possible Codomains const half = x => x / 2;

Type Systems Possible Domains Possible Codomains const half = (x: number) => x / 2; number string void object array symbol number NaN Uncaught TypeError

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

Type Systems string number void object array symbol Promise<User> Uncaught Error Possible Domains Possible Codomains function fetchUser(username: string): Promise<User>

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

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?

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

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

Type Systems async function doIt() { const maybeNoOne = await fetchUser('asdjasjdashjdkahjksd'); maybeNoOne .mapLeft(e => console.log(e.message)); // e: FetchError }

Type Systems [string, string] number void object array symbol Element undefined Possible Domains Possible Codomains export function firstVisibleElement( selector: string, scrollableAreaSelector: string ): Element | undefined $

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>

Type Systems type Option<A> = None<A> | Some<A> https://github.com/gcanti/fp-ts

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

Type Systems firstVisibleElement('.item', '.item-container').map(el => el.getAttribute('data-whatever') // string );

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

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

Type Systems Cardinality cardinality · number of elements of the set

Type Systems Lower cardinality = Less bugs*

Type Systems Pragmatic Set Theory set · collection of objects

Type Systems type Conferences = 'ReactRally' | 'Reactathon' | 'ReactiveConf';

Type Systems |Conferences| = 3 (not real syntax)

Type Systems type Conferences = string;

Type Systems |Conferences| = Infinity (not real syntax)

Type Systems Primitive types are not precise

Type Systems |object| = Infinity (not real syntax)

Type Systems Be precise

Type Systems function toString<T>(x: T): string { return x.toString(); } toString(undefined); toString(null);

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

Type Systems string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString<T>(x: T): string $

Type Systems function toString<T>(x: NonNullable<T>): string { return x.toString(); } toString(undefined); toString(null);

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

Type Systems string number object array symbol void string Uncaught TypeError Possible Domains Possible Codomains function toString<T>(x: NonNullable<T>): string

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

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

Type Systems Be pragmatic

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

Type Systems Types Over the Network GraphQL, Your New BFF

Type Systems

Type Systems Agenda A Gentle Introduction to Types Why Less is Better Types Over the Network

Type Systems sugarpirate_ poteto

Type Systems Cinemagraph by /u/fezzo Thank you

Swipe Left, Uncaught TypeError: Learning to Lov...

Swipe Left, Uncaught TypeError: Learning to Love Type Systems

More Decks by Lauren Tan

Other Decks in Programming

Featured

Transcript