Discriminating union doesn't work in template

[erezarnon]

Describe the bug

Column can be either a string, number, or object. However, svelte sees only the string part. Also, ts-ignore doesn't work (see #1026) which means there's no workaround.

<script lang="ts" context="module">
  import type {ComponentType} from 'svelte';

  export type ColumnComponent = {
    Component: ComponentType;
    props?: Record<string, unknown>;
  }
  export type Column = string | number | ColumnComponent;
</script>

<script lang="ts">
  export let columns: string[];
  export let items: Record<string, Column>[];
</script>

<table>
  <thead>
    <tr>
      {#each columns as column}
        <td>
          {column}
        </td>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each items as item}
      <tr>
        {#each columns as column}
          <td>
            {#if typeof item[column] === 'string' || typeof item[column] === 'number'}
              {item[column]}
            {:else}
              <!-- @ts-ignore -->
              <svelte:component this={item[column].Component} {...item[column].props} /> <!-- @ts-ignore -->
            {/if}
          </td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

Reproduction

See code snippet above. Looks like repl doesn't support typescript.

Logs

No response

System Info

System:
    OS: Linux 5.19 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 954.14 MB / 15.33 GB
    Container: Yes
    Shell: 5.2.2 - /bin/bash
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    Yarn: 3.3.0 - /usr/local/bin/yarn
    npm: 8.18.0 - /usr/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1

Severity

blocking all usage of svelte

[jasonlyu123]

Duplicate of #1541. This is a limitation of TypeScript's control flow analysis on an array index. The same error happens in a ts file. See ts playground example. In your case, you can workaround with {#const }

{#each columns as column}
  {@const value = item[column]}
  <td>
    {#if typeof value === "string" || typeof value === "number"}
      {item[column]}
    {:else}
      <svelte:component this={value.Component} {...value.props} />
    {/if}
  </td>
{/each}