Svelte 5: Array of tuples type inference issue

[Wombosvideo]

Describe the bug

Possibly not the right place to post this issue (might even be a TypeScript issue), but in the very specific example of having an array of tuples, type inference doesn't work properly when trying to render components dynamically.

Reproduction

<script lang="ts">
  //import type { Component } from 'svelte';
  import Icon1 from './Icon1.svelte';
  import Icon2 from './Icon2.svelte';

  // Define an array of tuples
  const buttons /*: [string, Component][]*/ = [["Button 1 Label", Icon1], ["Button 2 Label", Icon2]];
</script>

{#each buttons as [label, Icon]}
  <button>
    {label}
    <Icon /><!-- Type error is shown here -->
  </button>
{/each}

You can fix the error by explicitly typing the array of tuples (commented-out code).

Logs

Argument of type 'string | __sveltets_2_IsomorphicComponent<{ [x: string]: never; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent | Component<any, any, any> | null | undefined'.
  Type 'string' is not assignable to type 'ConstructorOfATypedSvelteComponent | Component<any, any, any> | null | undefined'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component.

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 17.15 GB / 31.01 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.local/share/pnpm/node
    npm: 10.8.3 - ~/.local/share/pnpm/npm
    pnpm: 9.12.0 - ~/.local/share/pnpm/pnpm
    bun: 1.1.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.89
  npmPackages:
    svelte: 5.0.0-next.175 => 5.0.0-next.175

Severity

annoyance

[Conduitry]

This is how TypeScript works. Without additional assistance, it detects the array as (string | Component)[][].

[brunnerh]

For static definitions like this, as const is the easiest fix.

const buttons = [
  ["Button 1 Label", Icon1],
  ["Button 2 Label", Icon2],
] as const;

For other cases you need a manual type annotation.

[Wombosvideo]

Side note in case someone sees this issue: Performance-wise it makes sense to use objects instead of tuples.