Svelte 5 + TypeScript：如何为组件props设默认值并保留props前缀？

有两种简洁的方式可以实现需求，同时保持用props.前缀访问属性：

方法一：对象合并设置默认值 #

直接创建props对象，将默认值放在前面，再展开$props()的结果（传入的属性会覆盖默认值），通过泛型给$props()指定类型确保TS类型安全：

<script lang="ts">
  const props = {
    age: 40, // 默认值
    ...$props<{
      name: string;
      age?: number;
    }>()
  };
</script>

<div>Name: {props.name}</div>
<div>Age: {props.age}</div>

方法二：解构后重组props对象 #

先解构$props()并给age设置默认值，再将解构出的变量重新组装成props对象：

<script lang="ts">
  const { name, age = 40 } = $props<{
    name: string;
    age?: number;
  }>();
  const props = { name, age };
</script>

<div>Name: {props.name}</div>
<div>Age: {props.age}</div>

两种方法都能保证：当组件未传入age时，props.age会使用默认值40；传入age时则使用传入的值，且始终通过props.前缀访问属性。

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