如何为Svelte组件透传props添加类型并保证类型安全

完全可以实现，Svelte + TypeScript 原生支持封装组件时的类型安全透传，你可以通过 Svelte 内置的类型工具直接提取基础组件的 Props 类型，不需要手动维护重复的类型定义。

具体实现方案 #

你可以使用 Svelte 官方提供的 ComponentProps 工具类型，它可以直接从组件实例中提取出所有对外暴露的 Props 类型：

<script lang="ts">
  // 从svelte包导入类型工具
  import type { ComponentProps } from 'svelte';
  import BaseInput from './BaseInput.svelte';

  // 提取BaseInput的所有Props类型，如果要固定type属性禁止外部传入，可以用Omit剔除避免冲突
  type InputProps = Omit<ComponentProps<typeof BaseInput>, 'type'>;

  // 支持扩展自定义Props，和基础组件类型交叉合并即可
  export let {
    // 可以添加你封装组件需要的自定义参数，比如年龄校验的边界值
    minAge = 0,
    maxAge = 120,
    // 剩余属性透传给基础组件
    ...inputProps
  }: {
    minAge?: number;
    maxAge?: number;
  } & InputProps = {}; // 给默认空对象避免解构赋值报错
</script>

<BaseInput {...inputProps} type="number" />

实现效果 #

• 所有 BaseInput 原本支持的属性，在使用 AgeInput 时都会有完整的类型提示，属性名拼写错误、类型不符合都会直接触发 TypeScript 报错
• 自定义添加的属性也会被纳入类型校验，不会破坏原有类型安全

低版本兼容方案 #

如果你的 Svelte 版本低于 3.55.0 不支持 ComponentProps，可以手动在基础组件中导出 Props 类型定义：

<!-- BaseInput.svelte -->
<script lang="ts">
  export interface BaseInputProps {
    value: string;
    placeholder?: string;
    disabled?: boolean;
    // 其余所有Props的类型定义
  }

  export let value = '';
  // + 其余Props定义
</script>

<input bind:value ... />

之后在封装组件时直接导入这个 BaseInputProps 类型使用即可，类型校验效果完全一致。

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