typed-wrap.js

// @flow

// Goal: define a top-level app state like the following. `sources`
// would be state managed by a redux reducer
type SourceState = { count: number };
type AppState = { sources: SourceState};

// Define a selector that takes a piece of the state, like sources
// (this is contrived)
function getNumSources(state: SourceState, x : number) {
  return state.count * x;
}

// Define a `wrap` function that takes a selector and returns a
// new selector with the same signature, but it takes the full
// AppState (not just a piece of it)
function wrap<S,A,R>(selector: (state: S, ...args: A[]) => R, field : $Keys<AppState>) {
  return function(state: AppState, ...args: A[]) : R {
    return selector(state[field], ...args);
  }
}

const wrapped = wrap(getNumSources, "sources");
wrapped({ sources: { count: 5 }}, 10);

@Gozala 1 nitpick and 2 possible issues.

Nitpick. This is a valid syntax for Flow

export const wrap = <outer:Object, inner, value, settings>
  ( selector: Selector<inner, value, settings>
  , field: $Keys<outer>
  ): <state:outer, config:settings> (input:state, options:config) => value =>
  (input, options) =>
  selector(input[field], options)

but surprisingly not for babel, which throws. Easy fix: transform to function

export function wrap<outer:Object, inner, value, settings>
  ( selector: Selector<inner, value, settings>
  , field: $Keys<outer>
  ): <state:outer, config:settings> (input:state, options:config) => value {
  return (input, options) =>
  selector(input[field], options)
}

Issues. You are using neither SourceState nor AppState, thus you can do something like (and Flow doesn't complain):

function getNumSources(state, x) {
  // return state.count * x;
  return state * x; // <= error
}

and

// wrapped1({ sources: { count: 5 }}, 3);
wrapped1({ sources: {}}, 3); // <= error

I'd like to propose a new implementation based on a more general (and type-checkable) slicer function instead of a field string:

lib.js

// @flow

type Selector<S, O, R> = (slice: S, options: O) => R;

export function wrap<ST, S, A, R>(selector: Selector<S, A, R>, slicer: (state: ST) => S): Selector<ST, A, R> {
  return function(state, options) {
    return selector(slicer(state), options)
  }
}

client.js

import { wrap } from './lib'

type SourceState = { count: number };
type AppState = { sources: SourceState};

const slicer = (state: AppState): SourceState => state.sources

function getNumSources(state, x: number) {
  return state.count * x
}

function getNumSources2(state, xs: Array<number>) {
  return xs.reduce((acc, x) => acc * x, state.count)
}

function getNumSources3(state, options: { n1: number, n2?: number }) {
  return state.count * options.n1 * (options.n2 ? options.n2 : 1)
}

export const wrapped1 = wrap(getNumSources, slicer)
wrapped1({ sources: { count: 5 }}, 3)
// wrapped1({ sources: {}}, 3) // throws
// wrapped1({ sources: { count: 5 }}, 'Not a number') // throws

// export const wrapped2 = wrap(getNumSources, "bar") // throws

export const wrapped3 = wrap(getNumSources2, slicer)
wrapped3({ sources: { count: 5 }}, [3, 4, 5])
// wrapped3({ sources: { counta: 5 }}, [3, 4, 5]) // throws
// wrapped3({ sources: { count: 5 }}, [3, 4, "5"]) // throws

export const wrapped4 = wrap(getNumSources3, slicer)
wrapped4({ sources: { count: 5 }}, { n1: 2 })
// wrapped4({ sources: { count: 5 }}, { n1: 2, n2: 'a' }) // throws

In response @gcanti

@Gozala 1 nitpick and 2 possible issues.

Nitpick. This is a valid syntax for Flow

export const wrap = <outer:Object, inner, value, settings>
( selector: Selector<inner, value, settings>
, field: $Keys
): <state:outer, config:settings> (input:state, options:config) => value =>
(input, options) =>
selector(input[field], options)
but surprisingly not for babel, which throws. Easy fix: transform to function

There was a babel issue (can remember the number) that I've reported and has being solved not too long ago, so in latest versions of babel it works fine.

Issues. You are using neither SourceState nor AppState, thus you can do something like (and Flow doesn't complain):

function getNumSources(state, x) {
// return state.count * x;
return state * x; // <= error
}
and

// wrapped1({ sources: { count: 5 }}, 3);
wrapped1({ sources: {}}, 3); // <= error

Seems like another bug in flow, but can be avoid by annotating getNumSources

I'd like to propose a new implementation based on a more general (and type-checkable) slicer function instead of a field string:

Yeah I have suggested to use getter function to @jlongster as well on IRC, which avoids $Keys<object> hacks and is also more JIT friendly approach. To be honest going all the way and use something like lenses makes the most sense to me, but there were some Redux related issues preventing it, if I understood correctly.