如何使用 svelte：component 和 TypeScript

发布于06月07日

我想使用动态组件根据枚举值 Select 视图:

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

但如果不传递所有必要的参数，则不会出现编译错误:

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

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

UPD:使用React映射示例

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

推荐答案

您可以使用通用包装器组件应用一点间接寻址.例如.

<!-- renderer.svelte -->
<script lang="ts">
    import type { SvelteComponentTyped } from 'svelte/internal';

    type C = $$Generic<typeof SvelteComponentTyped<any, any, any>>;

    export let component: C;
    export let props: C extends typeof SvelteComponentTyped<infer P> ? P : never;
</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; }' -->

这可能需要最新版本的svelte/svelte-preprocess才能正确使用泛型.您还可以删除泛型并更松散地键入渲染器的属性.将props作为另一个组件的导出至少可以确保props 丢失错误.