How to use svelte:component with TypeScript?

Question

I would like to use a dynamic component to select a view depending on the value of an enum:

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

But I don't get a compile error if I don't pass all the necessary parameters:

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

How to correctly specify the typing of dynamic components?

UPD: map example with React

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

brunnerh · Accepted Answer · 2023-10-31 10:59:35Z

14

You can apply a little indirection using a generic wrapper component. E.g.

<!-- 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} />

Usage example:

<!-- 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; }' -->

This may require very recent versions of svelte/svelte-preprocess to work correctly with the generics. You could also drop the generics and type the renderer's properties more loosely. Having props as an export of another component at the very least ensures the props missing error.

edited Oct 31, 2023 at 10:59

answered Jun 7, 2022 at 14:07

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vitali Over a year ago

Thanks, your example works! To solve my problem, it remains to get the components type with the desired type of parameters. For example, in React it can be solved with React.FC type like in UPD. I can't find any example how to get Svelte component type.

Vitali Over a year ago

Also, I don't understand how to use keywords "bind", "on", "use" in this case

brunnerh Over a year ago

You probably will not be able to use every feature when doing something like this. You will not be able to use bind in any case, if you spread properties. In general using svelte:component should be a rare occurrence, so you should pick your trade-offs. What is UPD? Also, you already have the "component type", it is what you import from a Svelte file.

brunnerh Over a year ago

If you want to get the type from within a component, that is currently not supported (GitHub issue).

brunnerh Over a year ago

@Einar: I updated the answer to reflex current syntax/types.

|

Collectives™ on Stack Overflow

How to use svelte:component with TypeScript?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related