Svelte封装子组件时如何保留其默认prop值无需重复定义

针对Svelte封装组件时避免重复编写子组件prop默认值的需求，有两种常见的实现方案： #

方案1：纯透传场景直接用$$restProps #

如果Wrapper组件不需要对传入的prop做额外处理，仅作为封装层透传所有属性，可以不需要在Wrapper中声明任何prop，直接通过$$restProps透传所有传入的参数，默认值会自动复用Child组件的配置：

// Wrapper.svelte
<script lang="ts">
    import Child from "./Child.svelte";
</script>

<Child {...$$restProps} />

这种方式的优势是完全不需要维护重复的默认值和类型定义，后续Child组件新增或修改prop时Wrapper也无需同步修改。 #

方案2：需要处理prop时抽离公共常量 #

如果Wrapper组件内部需要用到对应prop做逻辑处理，可以将公共默认值抽离为独立常量，两个组件统一引用即可：

1. 新增公共常量文件constants.ts

// constants.ts
export const DEFAULT_TEXT = 'hello world';

2. 调整Child组件引用常量

// Child.svelte
<script lang="ts">
    import { DEFAULT_TEXT } from './constants.ts';
    export let text = DEFAULT_TEXT;
</script>

<p>{text}</p>

3. 调整Wrapper组件引用常量
   如果需要复用Child的prop类型，还可以用Svelte内置的ComponentProps工具类推导类型，避免重复写类型定义：

// Wrapper.svelte
<script lang="ts">
    import type { ComponentProps } from 'svelte';
    import Child from "./Child.svelte";
    import { DEFAULT_TEXT } from './constants.ts';
    
    // 自动继承Child的text prop类型，无需重复定义
    export let text: ComponentProps<Child>['text'] = DEFAULT_TEXT;
    
    // 这里可以写你需要的额外逻辑，比如参数校验、格式转换等
</script>

<Child text={text} />

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