"No overload matches this call" typescript error when passing an array of stores to derived()

[ddanielou]

Not sure if a typescript or a svelte bug…
I get a "No overload matches this call" typescript error on that kind of code in VSCode:

const stores = [writable(''), writable(0)];
const test1 = derived(stores, () => 'blah'); 

Weirdly, this works

const test2 = derived([writable(''), writable(0)], () => 'blah');

Hovering above the stores constant shows that it's inferred to be an array of Writables, i.e. (Writable<string> | Writable<number>)[], whereas in the test2 example, the array of stores is inferred to be a [Writable<string>, Writable<number>] tuple.

The Stores type declaration in types/runtime/store/index.d.ts (declare type Stores = Readable<any> | [Readable<any>, ...Array<Readable<any>>];) is compatible with the second inference, but not with the first one. Adding | Readable<any>[] to the possible types of Stores seems to fix the issue.

Here's the full typescript error:

No overload matches this call.
  Overload 1 of 2, '(stores: Stores, fn: (values: any, set: (value: unknown) => void) => void | Unsubscriber, initial_value?: unknown): Readable<unknown>', gave the following error.
    Argument of type '(Writable<string> | Writable<number>)[]' is not assignable to parameter of type 'Stores'.
      Type '(Writable<string> | Writable<number>)[]' is not assignable to type '[Readable<any>, ...Readable<any>[]]'.
        Source provides no match for required element at position 0 in target.
  Overload 2 of 2, '(stores: Stores, fn: (values: any) => string): Readable<string>', gave the following error.
    Argument of type '(Writable<string> | Writable<number>)[]' is not assignable to parameter of type 'Stores'.
      Type '(Writable<string> | Writable<number>)[]' is not assignable to type '[Readable<any>, ...Readable<any>[]]'.ts(2769)

Tested on VSCode 1.55 on macOS 11, svelte 3.37, typescript 4.2.4, rollup.

--
Edit: after some more digging, I think it's probably related to microsoft/TypeScript#39244

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

The problem comes down to

const stores = [writable(0), writable(0)];
const test: Stores = stores

The problem is that Stores is typed as "array needs to contain at least one entry", while stores is typed as "array with any length". So the only solution would be to relax the typing, which will result in less TS errors at the cost of possibly more wrong inputs (empty array).

[ddanielou]

Hey, thanks for your answer. Now I see the point of using a variadic tuple instead of a typed array – which had me scratching my head.

I toyed with the idea of exporting the Stores interface, which would allow casting:

const stores = [writable(0), writable(0)];
const test = derived(stores as Stores, () => 'test');

… which is already starting to feel dirty. But then other errors kept piling up:

Conversion of type 'Writable<number>[]' to type 'Stores' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Writable<number>[]' is not comparable to type '[Readable<any>, ...Readable<any>[]]'.
    Source provides no match for required element at position 0 in target.

… which I guess could be fixed this way (🤯):

const stores = [writable(0) as Readable<number>, writable(0)];

… which, yeah… let us stop there.

And so, the more it goes, the more I'm thinking that typescript's inference is fundamentally wrong. Any thoughts on this?

[Conduitry]

The types have been loosened in 3.39.0.