I have several Svelte components, for example: Melon.svelte, Cherry.svelte, Phone.svelte. In a parent component, FruitBox.svelte, using <svelte:component>, I want to be able to dynamically render only fruit components, but not others.

Is there a way to annotate my components in some way, that would allow to semantically differentiate them?

<script lang="ts">
  import { onMount } from 'svelte';
  import Cherry from './Cherry.svelte';
  import Melon from './Melon.svelte';
  import Phone from './Phone.svelte';

  // can this be more specific than "any"?
  let fruitType: any;

  onMount(() => { fruitType = pickRandomFruit(); })

  function pickRandomFruit(): any // I want type annotation / compile time check here
  {
    // return Phone; <-- this would also work, but I want to limit that
    return (Math.random() >= 0.5) ? Melon : Cherry; 
  }
</script>

<svelte:component this={fruitType} /> 

I understand Svelte doesn’t have inheritance — however, I don’t need to share functionality or elements between components, but rather simple type annotation. Can this be achieved?