Vue组件包装器Props类型标注：保留TS提示并传递基础组件Props

1. 正确定义包装组件的Props类型 #

用TypeScript交叉类型合并基础组件Props与自定义属性，确保TS智能提示完整保留：

// 导入基础组件的Props类型
import { InputBaseProps } from './InputBase.vue'

// 包装组件Props = 基础Props + 自定义属性
type EnhancedInputProps = InputBaseProps & {
  label: string
  labelPosition?: 'top' | 'left'
}

// 在组件中定义Props
const props = defineProps<EnhancedInputProps>()

2. 过滤自定义属性，提取基础Props #

通过手动过滤或通用工具函数排除自定义属性，只保留基础组件需要的Props，避免属性污染：

手动过滤（简单场景） #

// 定义需要排除的自定义属性键名
const excludeProps = ['label', 'labelPosition']

// 过滤出基础Props并断言类型
const baseInputProps = Object.fromEntries(
  Object.entries(props).filter(([key]) => !excludeProps.includes(key))
) as InputBaseProps

通用工具函数（复杂场景） #

封装可复用的类型安全工具函数：

/**
 * 从Props中排除指定键，提取剩余属性
 * @param props 组件Props对象
 * @param excludeKeys 需要排除的键数组
 * @returns 过滤后的Props对象
 */
function pickExcluded<T, U extends keyof T>(props: T, excludeKeys: U[]): Omit<T, U> {
  return Object.fromEntries(
    Object.entries(props).filter(([key]) => !excludeKeys.includes(key as U))
  ) as Omit<T, U>
}

// 使用示例
const baseInputProps = pickExcluded(props, ['label', 'labelPosition'])

3. 传递基础Props与$attrs #

将过滤后的基础Props传递给基础组件，同时手动传递$attrs以保留未声明属性的正确传递：

import { useAttrs } from 'vue'

setup(props) {
  const attrs = useAttrs()
  const baseInputProps = pickExcluded(props, ['label', 'labelPosition'])

  return () => h('div', { class: 'enhanced-input' }, [
    h('label', { class: `label-${props.labelPosition || 'top'}` }, props.label),
    // 传递基础Props和未声明的属性给基础组件
    h(InputBase, { ...baseInputProps, ...attrs })
  ])
}

关键说明 #

• TS智能提示：交叉类型会自动继承基础组件的所有属性，TS会提供完整的Props提示，无需依赖extends。
• 属性隔离：过滤自定义属性后，基础组件只会接收它声明的Props，避免自定义属性被误传到基础组件的DOM元素上。
• $attrs兼容：通过useAttrs()获取未在Props中声明的属性并手动传递，确保这类属性能正确绑定到基础组件，同时不破坏包装组件自身的属性传递逻辑。

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