关于 Svelte 组件中 TS2322 错误的问题

Question

我正在使用 TypeScript 学习 Svelte。

我在这段代码中遇到了TS23 错误。

<script lang="ts">
    import Test1 from './Test1.svelte';
    import Test2 from './Test2.svelte';

    let components = [
        { name: 'Test1', component: Test1 },
        { name: 'Test2', component: Test2 }
    ];
    let selected;
</script>

{#each components as { name, component } (name)}
    <label><input type="radio" value={component} bind:group={selected} />{name}</label>
{/each}

<svelte:component this={selected} />

类型 'typeof ComponentTest1__SvelteComponent_' 不可分配给类型 'string |号码 |字符串[]'。

“typeof ComponentTest1__SvelteComponent_”类型缺少“string[]”类型中的以下属性：pop、push、concat、join 等 28 个。 ts(2322)

此错误发生在input 标记的value 属性中。

我应该如何处理？我真的不知道这个。

Answer 1

Typescript 表示无线电输入的 value 属性只能是字符串、数字或字符串数​​组 (string | number | string[])。假设 name 是唯一的，您可以使用 name 作为值。这将需要更多的工作来将名称映射回组件，但这非常少。

此示例将无线电输入绑定到 selectedName，并设置一个响应式语句以在 selectedName 更新时查找关联的组件。

<script lang="ts">
    import Test1 from './Test1.svelte';
    import Test2 from './Test2.svelte';

    let components = [
        { name: 'Test1', component: Test1 },
        { name: 'Test2', component: Test2 }
    ];
    let selectedName;

    $: selected = components.find((c) => c.name === selectedName);
</script>

{selectedName}
{#each components as { name, component } (name)}
    <label
        ><input type="radio" value={name} bind:group={selectedName} />{name}</label
    >
{/each}

{#if selected}
    <svelte:component this={selected.component} />
{/if}