组件剩余Props类型定义最佳实践：是否需扩展子组件Props？

绝对不要用any类型处理剩余Props #

直接让剩余Props无类型（隐式any）是完全不可取的做法——这会彻底丢掉TypeScript的类型检查优势，外部调用组件时可以随意传入任何无效属性，不仅不会得到类型提示，还可能导致底层Popover组件接收不支持的属性，引发运行时错误，后期维护排查成本极高。

基于Omit+交叉类型的类型安全方案（推荐） #

你尝试的第一种扩展Omit的方式是类型安全的，但可以通过拆分自定义属性与剩余Props优化冗长的定义，让代码更清晰易维护：

// 第一步：定义组件自身的专属属性
type TenantPopoverOwnProps = {
  loading?: boolean;
  tenants: Tenant[];
  selected: Tenant['id'][];
  disabled?: boolean;
  onChange: (tenants: Tenant['id'][]) => void;
};

// 第二步：组合剩余Props——排除掉我们自行处理/不需要的属性
type TenantPopoverProps = TenantPopoverOwnProps & 
  Omit<ComponentProps<typeof Popover>, 'disabled' | 'onChange' | 'children'>;

export default function TenantPopover({
  loading,
  tenants,
  selected,
  disabled: propDisabled, // 重命名避免和Popover的disabled混淆
  onChange,
  ...props
}: TenantPopoverProps) {
  // 自行处理disabled逻辑，覆盖底层组件的默认行为
  const disabled = propDisabled || tenants?.length < 2 || !tenants;

  return (
    <Popover
      className="TenantPopover"
      disabled={disabled}
      {...props}
    >
      <Button onClick={() => onChange(selected)} />
    </Popover>
  );
}

为什么这是最佳实践？ #

• 类型完全安全：通过ComponentProps<typeof Popover>动态获取底层组件的Props类型，结合Omit排除冲突属性，确保传给Popover的剩余Props都是它合法支持的，外部调用时TypeScript会自动校验所有属性的类型和合法性。
• 代码结构清晰：拆分专属属性与继承属性后，维护时能快速区分哪些是组件自定义逻辑需要的，哪些是透传给底层组件的，避免混乱。
• 维护成本低：如果底层Popover组件的Props有更新，ComponentProps会自动同步类型，不需要手动修改定义，减少同步错误。
• 避免属性冲突：明确排除掉我们自行处理的属性（比如示例中的disabled、onChange），以及固定的children，防止外部传入的属性覆盖组件内部逻辑，或导致组件结构异常。

对比原始方案 #

你最初直接扩展Omit的方式是可行的，但拆分OwnProps后，接口定义更简洁，尤其当自定义属性或需要排除的属性较多时，可读性会大幅提升。

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