redux - Typescript espera que se pase undefined como argumento

Typescript: 2.4.1

Estoy intentando crear una función auxiliar para generar creadores de acciones de redux.

Lo que tengo:

interface IAction<T extends string, P = undefined> {
    type: T;
    payload: P;
}

function createAction<T extends string>(type: T): () => IAction<T, undefined>;
function createAction<T extends string = '', U = undefined, V = {}>(type: T, actionCreator: (payload: U) => V): (payload: U) => IAction<T, V>;
function createAction<T extends string>(type: T, actionCreator?: (payload?: any) => any) {
    return (payload: any) => ({
        payload,
        type,
    });
}

enum ActionType {
    INCREMENT = 'COUNTER/INCREMENT',
    DECREMENT = 'COUNTER/DECREMENT',
    ASYNC_INCREMENT = 'COUNTER/ASYNC_INCREMENT',
}

const increment = createAction(ActionType.INCREMENT, () => ({ amount: 1 }));
const incrementBy = createAction(ActionType.INCREMENT, (amount: number) => amount);

En este ejemplo, espero que increment sea una función que no tome argumentos, y que incrementBy tome exactamente 1 (un número).

incrementBy funciona como se espera, pero Typescript lanza este error al llamar a increment() (sin argumentos):

[ts] Expected 1 arguments, but got 0;

Intentando llamarlo de la misma manera que llamo a incrementBy, por ejemplo, increment(42), obtengo este error:

[ts] Argument of type '42' is not assignable to parameter of type 'undefined';

Esto funciona: increment(undefined).

¿Hay una manera de arreglar esto?

Respuesta #1

Simplemente deberías crear otra sobrecarga que diga que devolverá una función sin argumentos, en lugar de una función que tome undefined como el único argumento.

function createAction<T extends string>(type: T): () => IAction<T, undefined>;
function createAction<T extends string, V>(type: T, actionCreator: () => V): () => IAction<T, V>;
function createAction<T extends string, U, V>(type: T, actionCreator: (payload: U) => V): (payload: U) => IAction<T, V>;
function createAction<T extends string, U, V>(type: T, actionCreator?: (payload: U) => V): (payload: U) => IAction<T, V> {
    return (payload: any) => ({
        payload,
        type,
    });
}

Sin embargo, tu implementación no parece hacer nada con la función que se está pasando. Probablemente quieras hacer esto:

function createAction<T extends string>(type: T): () => IAction<T, undefined>;
function createAction<T extends string, V>(type: T, actionCreator: () => V): () => IAction<T, V>;
function createAction<T extends string, U, V>(type: T, actionCreator: (payload: U) => V): (payload: U) => IAction<T, V>;
function createAction<T extends string, U, V>(type: T, actionCreator?: (payload: U) => V): (payload: U) => IAction<T, V> {
    if (actionCreator) {
        return (payload: U) => ({
            payload: actionCreator(payload),
            type,
        });
    } else {
        return () => ({
            payload: undefined,
            type
        });
    }
}