是否可以注释Svelte组件的类型？

Question

我有几个 Svelte 组件，例如：

Melon.svelte

、

Cherry.svelte

、

Phone.svelte

。在父组件

FruitBox.svelte

中，使用

<svelte:component>

，我希望能够仅动态渲染水果组件，而不渲染其他组件。

有没有办法以某种方式注释我的组件，从而可以在语义上区分它们？

<!-- FruitBox.svelte --> 
<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} /> 

我知道 Svelte 没有继承——但是，我不需要在组件之间共享功能或元素，而是需要简单的类型注释。这能实现吗？

Answer 1

正如 @Peppe L-G 的评论中所建议的，使用 Svelte 的

ComponentType

类型和

SvelteComponent

类可以帮助解决这个问题：

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

  import { type ComponentType, SvelteComponent } from "svelte";

  export type FruitComponent = ComponentType<
    SvelteComponent<{ hasSeeds: boolean, weightGrams: number }>
  >;

  export type SlideComponent = ComponentType<SvelteComponent<
    { hasSeeds: boolean, weightGrams: number }, // Props
    { juice: CustomEvent<FruitJuice> } // Events
  >>;

  let fruit: FruitComponent;

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

  function pickRandomFruit(): FruitComponent {
    return (Math.random() >= 0.5) ? Melon : Cherry; 
  }
</script>

<svelte:component this={fruit} /> 

这将要求

Melon.svelte

和

Cherry.svelte

（以及

pickRandomFruit()

返回的任何其他组件构造函数）具有以下属性：

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let hasSeeds: boolean;
  export let weightGrams: number;

  const dispatch = createEventDispatcher<{juice: FruitJuice}>();
</script>

，并且不允许该函数返回

Phone

构造函数，或不具有这些属性的组件的任何其他构造函数。