Error when spreading a union of tuples in a call

[sarfata]

Bug Report

🔎 Search Terms

destructure array typescript union

🕗 Version & Regression Information

I used the playground to test different versions and it looks like this has always occured.

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about "Type Systems behavior", "Type Guards", "Functions".

⏯ Playground Link

Playground link with relevant code

💻 Code

const t = [4,20] as const
const t2 = [4, 20, 30] as const
const t3 = [10, 10] as [number, number] | [number, number, number]

// Works
new Date().setHours(...t)
new Date().setHours(...t2)

// Error: Expected 1-4 arguments, but got 0 or more.
new Date().setHours(...t3)

🙁 Actual behavior

Error: Expected 1-4 arguments, but got 0 or more.

The array type passed as a length of 2 or 3 so the message "got 0 arguments" is wrong.

🙂 Expected behavior

I expect the compiler should be able to recognize that the array type can only have length 2 or 3 and would not throw an error.

[mdziekon]

I think I've seen either same, or very similar problem in my code once I've upgraded from TS 3.9 to TS 4.0 / TS 4.1 (both versions report the same issue with my code). This was not an issue before the upgrade, so the last known working version (for me at least) is 3.9.7.

---

My code looks something like this (it's a React app, the snippet comes from a wrapper component that attaches its own additional handler on the passed onChange handler):

type BaseComponentProps = React.ComponentProps<typeof BaseComponent>;

const handleClick = (...args: Parameters<NonNullable<BaseComponentProps['onChange']>>) => {
    onChangeAdditionalHandler(...args);

    onChange?.(...args);
};

With this code I get the following error on the onChangeAdditionalHandler call line:

Expected 1 arguments, but got 0 or more.  TS2556

even though the args is properly inferred as:

type Args = typeof args;
// -> [ event: React.ChangeEvent<HTMLInputElement>] | [ event: React.ChangeEvent<HTMLInputElement>]

(the union type comes from how React typings are created for the base component)

---

This can be simplified and reproduced with the following code:

const testFunction = (thisVal: () => void) => {
    console.log(thisVal);
};

const testCase = () => {
    type MyArgs =
        | [ handler: () => void ]
        | [ handler: () => void ];

    const args = [ () => undefined ] as MyArgs;

    testFunction(...args);
};

It looks like union types freak out the arguments spreading, even though the applied types are basically the same thing. Even the tuples have the same length, so it shouldn't be a problem.

[sandersn]

Related to #42891; I'll look at both at the same time.

[sandersn]

I tried again with a smaller fix, although I'm still not sure it's a good enough fix.

[sandersn]

After discussing this fix in the design meeting, we decided to not take #55185 either. It's too ad-hoc for the complexity of its code.

If/when we try to reform overload resolution's interaction with type parameter inference and contextual typing, we should address this bug at the same time. Specifically, this example needs the ability to roll back inferences, same as overload type parameter inference. Then the fix here would be to make tuples generate multiple argument lists instead of trying to produce a single argument list. Each argument list can be applied against each overload (or a single signature if there's only one.)

[jason-ha]

I believe I have another case for this issue.
A fix is needed to truly support "perfect" forwarding when target function has rest that is union.

function target(arg1: string, ...numsOrStrs: number[] | string[]): void {}

function wrapper(...args: Parameters<typeof target>): ReturnType<typeof target> {
    return target(...args); // TS2556 A spread argument must either have a tuple type or be passed to a rest parameter.
}

In this case Parameters<...> is union of tuples: [arg1: string, ...numsOrStrs: number[]] | [arg1: string, ...numsOrStrs: string[]].

Either Parameters needs to produce tuple as original parameter type ([arg1: string, ...numsOrStrs: number[] | string[]]) or spread needs to recognize unions of tuples.

playground that has a little extra

[nikelborm]

Why not just use this?

const t3 = [10, 10] as [number, number, number?]
new Date().setHours(...t3)