gcanti

Technical overview

A basic Option type

// Option.ts

// definition
export class None {
  readonly tag: 'None' = 'None'

gcanti

import * as React from 'react'

type Witness<A, B, C> = (x: A & B) => C

// P = original props
// D = defaulted props
// U = untouched props
function removeProps<P, D extends keyof P, U extends keyof P>(defaults: Pick<P, D>, witness: Witness<Pick<P, D>, Pick<P, U>, P>): (Component: React.ComponentClass<P>) => React.ComponentClass<Pick<P, U>> {
  return Component => class extends React.Component<Pick<P, U>, void> {
    render() {

gcanti

// @flow

//
// library agnostic types and helpers
//

// keep private
class Unit<A> {}
class IsMedia {}

gcanti

// @flow

// Params -> Querystring -> A
type Handler<A, P = void, Q = void> = (p: P, q: Q) => A;

type Id = { id: string };

// config type
type Router<a> = {</a>

gcanti

// A is a phantom type that ties an event instance...
class Event<A> {}
// ...to its handler
type Handler<A> = (a: A, ...rest: Array<void>) => void;

declare class EventEmitter {
  on<A, F: Handler<A>>(event: Event<A>, handler: F): void;
  emit<A>(event: Event<A>, a: A): void;
}

gcanti

// @flow

// based on State Machines All The Way Down
// An Architecture for Dependently Typed Applications
// https://eb.host.cs.st-andrews.ac.uk/drafts/states-all-the-way.pdf
// by Edwin Brady

//
// finite state machine

gcanti

// @flow
declare type Reducer<S, A> = (state: S, action: A) => S;
type ExtractState = <S>(r: Reducer<S, *>) => S;
declare function combineReducers<O, A>(reducers: O): Reducer<$ObjMap<O, ExtractState>, A>;

type State = {
  name: string,
  age: number
};

gcanti

Type driven development with Flow

Written by @alpacaaa and @GiulioCanti

"Type driven development" is a technique used to split a problem into a set of smaller problems, letting the type checker suggest the concrete implementation, or at least helping us getting there. Here's a practical example

The Problem

Say for instance that we like to reimplement the function Promise.all, we'll name it sequence. Let's start with its signature

gcanti

/* @flow */

import React from 'react'
import ReactDOM from 'react-dom'

type FunctionComponent<A> = (props: A) => ?React$Element<any>;

type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>;

type Component<A> = FunctionComponent<A> | ClassComponent<any, A, any>;

gcanti

// @flow

import { HKT } from '../HKT'
import type { Functor } from '../Functor'

class IsList {}

class Cons<A> {
  head: A;
  tail: ListV<A>;