Typescript function 参数过载 rest

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.

Answer 1

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