Typescript function overload with rest parameters

Question

I have a code like this, with a couple of overloaded functions with rest parameters:

    type IAuthSelectors =
      | 'selector1'
      | 'selector2'
      | 'selector3'
      | 'selector4'
      | 'selector5'
      | 'selector6';

    function getAuthState(selector: 'selector1'): string[];
    function getAuthState(selector: 'selector2', param1: string): boolean;
    function getAuthState(selector: 'selector3'): boolean;
    function getAuthState(selector: 'selector4'): string;
    function getAuthState(selector: 'selector5'): MyInterface;
    function getAuthState(selector: 'selector6'): string;
    function getAuthState(selector: IAuthSelectors, ...selectorArguments: unknown[]): unknown
    function getAuthState(selector: IAuthSelectors, ...selectorArguments: unknown[]): unknown {
      // return logic
    }

    function useAuthSelector(selector: 'selector1'): string[];
    function useAuthSelector(selector: 'selector2', param1: string): boolean;
    function useAuthSelector(selector: 'selector3'): boolean;
    function useAuthSelector(selector: 'selector4'): string;
    function useAuthSelector(selector: 'selector5'): MyInterface;
    function useAuthSelector(selector: 'selector6'): string;
    function useAuthSelector(selector: IAuthSelectors, ...selectorArguments: unknown[]): unknown {
      const authState = getAuthState(selector, ...selectorArguments); // ERROR A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556)

      // ...
    }

But I cannot make one to call the other. The error: ERROR A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556) is pretty clear. But if I try to cast it to a tuple it breaks. I have also tried checking the number of rest parameters to call it with parameters or not, but it doesn't work.

Right now, this has only one "selector" with rest parameters, but there could be more in the future. I added the overload functions to have proper types in the components calling them.

Any ideas?

Thank you!

EDIT: If I add the spread overload, it doesn't fail, but I can do something like this:

    type IAuthSelectors =
      | 'selector1'
      | 'selector2';

    function getAuthState(selector: 'selector1'): string[];
    function getAuthState(selector: 'selector2', param1: string): boolean;
    function getAuthState(selector: IAuthSelectors, ...selectorArguments: unknown[]): unknown
    function getAuthState(selector: IAuthSelectors, ...selectorArguments: unknown[]): unknown {
      // return logic
    }

getAuthState('selector1', 'param1', 'param2'); // NO ERROR

Any way to keep the inference of parameters? If I add the spread overload it no longer infers the other prototypes.

The implementation signature isn't accessible, only the overloads. — T.J. Crowder
– T.J. Crowder, Commented Oct 6, 2022 at 10:39
I saw that. It does not throw error anymore, but it does not behave as I expected :S How can I make it know the desired arguments? I have edited the question to include this. — Sergio Tx
– Sergio Tx, Commented Oct 6, 2022 at 10:49

T.J. Crowder · Accepted Answer · 2022-10-06 13:39:22Z

I take it the possible arguments for the two functions are identical.

It's not unusual inside an overload implementation for types to be a bit ... loose. :-) You might just suppress the error via ts-expect-error (and not expose the rest arguments versions of the calls), since you know the arguments are correct. I'm not a fan of doing that most of the time, but overloads tend to go this way (but keep reading).

function useAuthSelector(selector: IAuthSelectors, ...selectorArguments: unknown[]): any {
    // @ts-expect-error
    const authState = getAuthState(selector, ...selectorArguments);
    //    ^? const authState: never

    // ...
}

Playground link (side note: In there, I fixed the return type of the overload implementation functions, which should be any or a union of all the possible return types from the overload signatures, not unknown)

But, aside from the "ewww" factor of using ts-expect-error, there's also the devex issue that authCheck's type would be never. :-|

Alternatively, you could use a mapped type for the parameters and return type instead of overloads (but keep reading):

type IAuthSelectors =
    | "selector1"
    | "selector2"
    | "selector3"
    | "selector4"
    | "selector5"
    | "selector6";

type SelectorCall<Selector extends IAuthSelectors> =
    Selector extends "selector1"
    ? {
          params: [];
          returnType: string[];
      }
    : Selector extends "selector2"
    ? {
          params: [param1: string];
          returnType: boolean;
      }
    : Selector extends "selector3"
    ? {
          params: [];
          returnType: boolean;
      }
    : Selector extends "selector4"
    ? {
          params: [];
          returnType: string;
      }
    : Selector extends "selector5"
    ? {
          params: [];
          returnType: MyInterface;
      }
    : Selector extends "selector6"
    ? {
          params: [];
          returnType: string;
      }
    : never;

function getAuthState<Selector extends IAuthSelectors, CallType extends SelectorCall<Selector>>(
    selector: Selector,
    ...params: CallType["params"]
): CallType["returnType"] {
    return null as any as CallType["returnType"];
}

function useAuthSelector<Selector extends IAuthSelectors, CallType extends SelectorCall<Selector>>(
    selector: Selector,
    ...params: CallType["params"]
): CallType["returnType"] {
    const authState = getAuthState(selector, ...params);

    return authState;
}

const x = useAuthSelector("selector1");
//    ^? const x: string[]
const y = useAuthSelector("selector2", "param value");
//    ^? const y: boolean

Playground link

You still get argument suggestions and auto-complete, etc. Thanks to named tuple elements, you even get the name param1 showing when you do useAuthSelector("selector2", _:

caTS points out in a comment that mapped conditionals like that are fairly slow (at compile time) and this one could easily be replaced with a lookup. Quite true! And doing so means we don't have to repeat the selector names, because we can derive IAUthSelectors from that lookup type, like this:

type SelectorCall = {
    selector1: {
        params: [];
        returnType: string[];
    };
    selector2: {
        params: [param1: string];
        returnType: boolean;
    };
    selector3: {
        params: [];
        returnType: boolean;
    };
    selector4: {
        params: [];
        returnType: string;
    };
    selector5: {
        params: [];
        returnType: MyInterface;
    };
    selector6: {
        params: [];
        returnType: string;
    };
};

type IAuthSelectors = keyof SelectorCall;

Then the functions are:

function getAuthState<Selector extends IAuthSelectors, CallType extends SelectorCall[Selector]>(
    selector: Selector,
    ...params: CallType["params"]
): CallType["returnType"] {
    return null as any as CallType["returnType"];
}

function useAuthSelector<Selector extends IAuthSelectors, CallType extends SelectorCall[Selector]>(
    selector: Selector,
    ...params: CallType["params"]
): CallType["returnType"] {
    const authState = getAuthState(selector, ...params);

    return authState;
}

Playground link

Usage is the same, as is the IDE experience (with parameter names and such).

Works perfect! Thank you!!! I have not experimented much with conditional types, I think it's time to give them a try.
You might want to consider changing that long chain of conditionals to a lookup table for performance. Conditionals are still pretty slow :P
@caTS - Thanks. You know, I did think about a lookup when I was doing it, and then...seem to have kinda forgotten. :) Also lets us avoid repeating the selector strings; type IAuthSelectors = keyof SelectorCall; :D

Collectives™ on Stack Overflow

Typescript function overload with rest parameters

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related