Svelte组件类型标注疑问：替代ConstructorOfATypedSvelteComponent方案

我有如下组件，其中items是Svelte组件构造函数的数组：

<script lang="ts">
  // ...其他脚本代码
  export let items: ConstructorOfATypedSvelteComponent[];
</script>

<!-- ...其他HTML代码 -->
{#each items as item}
   <!-- ...更多HTML代码 -->
   <svelte:component this={item}></svelte:component>
{/each}

这是一个极简示例，由于使用named slots等其他特性极为不便，我选择使用ConstructorOfATypedSvelteComponent。
但在ConstructorOfATypedSvelteComponent的JSDoc中看到提示：

/**
 * Ambient type only used for intellisense, DO NOT USE IN YOUR PROJECT
 */
declare type ConstructorOfATypedSvelteComponent = new (args: {target: any, props?: any}) => ATypedSvelteComponent

我对该提示感到困惑：SvelteJS推荐使用什么类型来标注组件？或者是否有其他可行的实现思路？

官方推荐的类型标注 #

Svelte官方推荐使用从svelte包导出的ComponentType类型来标注组件构造函数，它是专门为这类场景设计的类型，能完美兼容Svelte的组件系统，同时支持对组件props的类型约束。

基础用法示例：

<script lang="ts">
  import type { ComponentType } from 'svelte';
  // ...其他脚本代码
  export let items: ComponentType[];
</script>

<!-- ...其他HTML代码 -->
{#each items as item}
   <!-- ...更多HTML代码 -->
   <svelte:component this={item}></svelte:component>
{/each}

如果需要限制组件必须接收特定的props，可以结合泛型使用：

<script lang="ts">
  import type { ComponentType } from 'svelte';
  
  interface RequiredComponentProps {
    title: string;
    count: number;
  }
  // 仅允许传入符合RequiredComponentProps约束的组件
  export let items: ComponentType<RequiredComponentProps>[];
</script>

其他可行实现思路 #

• 精确的联合类型标注：如果明确知道传入组件的范围，可以直接导入对应组件的类型并创建联合类型，这种方式能获得最精准的props类型提示：

<script lang="ts">
  import type Card from './Card.svelte';
  import type Button from './Button.svelte';
  
  export let items: (typeof Card | typeof Button)[];
</script>

• 自定义组件构造类型：在特殊场景下，也可以基于Svelte的基础组件类型封装自定义构造类型，但这种方式灵活性不如官方ComponentType，仅推荐在特定需求下使用：

import type { SvelteComponent } from 'svelte';

type CustomComponentConstructor = new (args: { target: Element; props?: Record<string, unknown> }) => SvelteComponent;

内容的提问来源于stack exchange，提问作者Tristan F.-R.