typescriptsveltesvelte-component

What is the type of a Svelte component?

When you look at this code:

<script lang="ts">
  import RedThing from "./RedThing.svelte";
  import GreenThing from "./GreenThing.svelte";

  const things: Record<string, typeof RedThing> = {
    red: RedThing,
    green: GreenThing,
  };
</script>

Then everything works and is strongly typed. But in my mind it would make more sense to replace typeof RedThing with SvelteComponent or something similar? But that causes TS errors: Type 'typeof RedThing__SvelteComponent_' is missing the following properties from type 'SvelteComponentDev': $set, $on, $destroy, $$prop_def, and 5 more.

So what is the "generic" type for a Svelte component?

Or when looking at <svelte:component this={expression}/>, what type does this accept?

Solution

  • In Svelte 4, the common type is ComponentType (which has optional generic parameters).

    In Svelte 5 it is Component.