如何在TypeScript中使用svelte:component？

Question

我想使用动态组件根据枚举的值选择视图：

<svelte:component
  this={components[enumValue]}
  {...props}
/>

但是如果我没有传递所有必要的参数，我就不会收到编译错误：

<svelte:component
  this={components[enumValue]}
/>

如何正确地指定动态组件的类型？

---

UPD：React 中的 map 示例

const props: Props = {...}
const components: Record<EnumType, React.FC<Props>> = {
  [EnumType.variant_1]: Component1,
  [EnumType.variant_2]: Component2,
}

- Vitali

Answer 1

你可以使用一个通用的包装组件来进行一些间接操作。例如：

<!-- renderer.svelte -->
<script lang="ts" generics="C extends ComponentType">
    import type { ComponentType, ComponentProps } from 'svelte';

    export let component: C;
    export let props: ComponentProps<InstanceType<C>>;
</script>

<svelte:component this={component} {...props} />

用法示例：

<!-- adder.svelte -->
<script lang="ts">
    export let a: number;
    export let b: number;
</script>

{a} + {b} = {a + b}

<script lang="ts">
    import Renderer from './renderer.svelte';
    import Adder from './adder.svelte';
</script>

<Renderer component={Adder} />
<!-- Error on "Renderer" because props are missing -->

<Renderer component={Adder} props={{ a: 12 }} />
<!-- Error on "props": Property 'b' is missing in type '{ a: number; }'
                       but required in type '{ a: number; b: number; }' -->

这可能需要非常新的版本的/才能正确地与泛型一起使用。您还可以放弃泛型，更宽松地为渲染器的属性进行类型标注。至少将作为另一个组件的导出，可以确保props缺失错误。

- H.B.

---

谢谢，你的示例有效！为了解决我的问题，还需要获取具有所需参数类型的组件类型。例如，在React中，可以使用React.FC类型来解决，就像在UPD中一样。我找不到任何关于如何获取Svelte组件类型的示例。 - Vitali

此外，我不明白如何在这种情况下使用关键词“bind”，“on”和“use”。 - Vitali

在这种情况下，您可能无法使用每个功能。如果您展开属性，则无论如何都无法使用bind。通常情况下，使用svelte:component应该是一个罕见的事件，因此您应该选择权衡。UPD是什么？另外，您已经拥有“组件类型”，它是从Svelte文件中导入的内容。 - H.B.

如果你想从组件内部获取类型，目前还不支持（GitHub问题）。 - H.B.

SvelteComponentTyped现已被弃用，而且我无法让这个提议的解决方案起作用 - 有什么想法吗？（使用Svelte 4.2.1） - undefined

@Einar：我更新了答案以反映当前的语法/类型。 - undefined