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

Actually, when I tried to use this in my project, I hit an error that I remember now. The problem is that I want to export the wrapped functions, so flow forces me to fully annotate them. Above, ...args is not annotated so flow complains when I try to export it.

This works as expected, but you can't have variadic selectors. You'd need to pack params into a single object or a tuple instead, which is common limitation in languages with ADTs:

// @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, x) {
  return state.count * x;
}

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


// 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)
type Selector <outer, inner, settings> =
  (input:outer, options:settings) => inner

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


export const wrapped1 = wrap(getNumSources, "sources");     
wrapped1({ sources: { count: 5 }}, 3);
wrapped1({ sources: { count: 5 }}, 'Not a number');
/*
38: wrapped1({ sources: { count: 5 }}, 'Not a number');
                                       ^ string. This type is incompatible with
10: function getNumSources(state: SourceState, x: number) {
                                                  ^ number
*/

export const wrapped2 = wrap(getNumSources, "bar");
wrapped2({ sources: { count: 5 }}, 3);
/*
46: export const wrapped2 = wrap(getNumSources, "bar");
                                                ^ property `bar`. Property not found in
30:   , field: $Keys<outer>               ^ object literal
*/

export const wrapped3 = wrap(getNumSources2, "sources")
wrapped3({ sources: { count: 5 }}, [3, 4, 5])
wrapped3({ sources: { count: 5 }}, [3, 4, "5"])
/*
56: wrapped3({ sources: { count: 5 }}, [3, 4, "5"])
                                              ^ string. This type is incompatible with
14: function getNumSources2(state, xs:Array<number>) {
                                            ^ number
*/

Alternatively you can add extra type parameters to Selector type, that way if your selector just uses 1 parameter rest will be void if you use two than other then first two would be void etc.. So you can still do variadic functions up to limited number of parameters but annotations will be more complex and tim to type check will also increase.

P.S.: Trick was to make returned selector also polymorphic which is due to issue #2105

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