如何为Svelte组件数组添加TypeScript类型定义？

问题背景 #

使用<svelte:component>循环渲染不同幻灯片组件时，希望为slides数组中的每个元素定义TypeScript类型，确保每个元素的Props与对应的组件要求匹配。此前尝试使用writable<typeof SvelteComponent>相关类型时出现导入或类型报错。

解决方案 #

1. 定义组件Props与联合类型 #

创建一个类型文件（比如src/lib/types/slides.ts），或者直接在使用的组件中定义以下类型：

import type { SvelteComponent } from 'svelte';
import TitleSlide from '$lib/components/Slides/TitleSlide.svelte';
import HeaderSlide from '$lib/components/Slides/HeaderSlide.svelte';

// 自动提取每个组件的Props类型
type TitleSlideProps = typeof TitleSlide extends new (...args: any[]) => infer T ? T['$$prop_def'] : never;
type HeaderSlideProps = typeof HeaderSlide extends new (...args: any[]) => infer T ? T['$$prop_def'] : never;

// 定义幻灯片项的联合类型，确保组件与Props匹配
export type SlideItem = 
  | (TitleSlideProps & { component: typeof TitleSlide })
  | (HeaderSlideProps & { component: typeof HeaderSlide });

2. 为Presentation组件指定slides类型 #

修改Presentation.svelte中的类型定义：

<script lang="ts">
    import type { SlideItem } from '$lib/types/slides';
    export let slides: SlideItem[];
</script>

{#each slides as slide}
    <svelte:component this={slide.component} {...slide} />
{/each}

3. 在+page.svelte中使用类型约束 #

此时slides数组会自动根据组件类型校验Props，不符合要求时TypeScript会直接报错：

<script lang="ts">
    import TitleSlide from '$lib/components/Slides/TitleSlide.svelte';
    import Presentation from '$lib/components/Presentation.svelte';
    import HeaderSlide from '$lib/components/Slides/HeaderSlide.svelte';
    import type { SlideItem } from '$lib/types/slides';

    const slides: SlideItem[] = [
        {
            component: TitleSlide,
            title: "我的演示标题",
            subtitle: "副标题示例"
        },
        {
            component: HeaderSlide,
            header: "章节标题"
        }
    ]
</script>

<Presentation {slides} />

关键说明 #

• 无需使用writable：writable是Svelte Store的响应式变量类型，和组件实例传递无关，这里直接使用组件本身的类型即可。
• 自动提取Props：通过typeof Component extends new (...args: any[]) => infer T ? T['$$prop_def'] : never可以自动获取Svelte组件导出的Props类型，避免手动重复定义。
• 联合类型约束：SlideItem联合类型确保每个数组元素的component字段与对应的Props严格匹配，TypeScript会自动完成类型校验。

内容的提问来源于stack exchange，提问作者jun2040