如何正确推导Svelte组件的Props类型（TypeScript）

两种方案的问题分析 #

1. 方案1（$$props类型转换）
   这种写法虽能实现类型约束，但Svelte官方不推荐依赖$$props做常规Props声明：

• $$props包含所有传入组件的属性（包括未显式声明的），类型转换会掩盖潜在类型错误，比如传入未定义Props时不会触发类型检查。
• 依赖$$props会影响Svelte的编译优化，编译器无法精准分析组件的依赖Props。
• 关于事件转发：这种写法不会阻止事件转发，事件转发与Props声明方式无关，只要组件未通过on:*语法显式阻止事件冒泡，事件会正常传递。

2. 方案2（打包为单个props对象）
   这种写法违背了Svelte的Props设计习惯：

• 必须通过props={{a, b}}传入属性，无法使用Svelte简洁的<MyComponent {a} {b} />或<MyComponent {{a, b}} />展开语法，使用体验极差。
• 失去了单个Props的独立类型提示、默认值设置等能力，灵活性极低。

正确且最优的解决方案 #

Svelte 3.48+提供的defineProps方法是官方推荐的TypeScript Props声明方式，既简洁又能获得完整类型支持：

<script lang="ts">
    interface ComponentPropType {
        a: string;
        b: number;
    }

    // 通过泛型定义Props类型，解构后直接使用
    const { a, b } = defineProps<ComponentPropType>();
</script>

<h1>a = {a} </h1>
<p>My value is {b} </p>

如果需要为Props设置默认值，可调整为：

<script lang="ts">
    interface ComponentPropType {
        a: string;
        b: number;
    }

    const { a = "默认文本", b = 0 } = defineProps<ComponentPropType>();
</script>

也可以选择逐个声明Props并关联接口类型，适合需要更细粒度控制的场景：

<script lang="ts">
    interface ComponentPropType {
        a: string;
        b: number;
    }

    export let a: ComponentPropType["a"];
    export let b: ComponentPropType["b"];
</script>

这两种写法都支持<MyComponent {a} {b} />或<MyComponent {{a, b}} />的调用方式，能获得完整的TypeScript类型检查，也不会影响事件转发。

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