如何在TypeScript中根据组件参数推断其余Props类型？

要实现这种自动匹配目标组件Props的通用组件，核心是利用TypeScript的泛型和React.ComponentProps工具类型自动推断类型，无需手动传入额外类型参数。以下是具体实现方案：

1. 定义通用组件的类型与实现 #

import React from 'react';

// 泛型C约束为React支持的元素类型（组件或HTML标签）
type FormFieldProps<C extends React.ElementType> = Omit<React.ComponentProps<C>, 'component'> & {
  component: C;
};

export const FormField = <C extends React.ElementType>(props: FormFieldProps<C>) => {
  // 解构出指定组件，剩余Props直接传递给它
  const { component: Component, ...rest } = props;
  return <Component {...rest} />;
};

2. 使用示例 #

假设我们有一个自定义的Input组件：

type InputProps = {
  placeholder?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export const Input = ({ placeholder, value, onChange }: InputProps) => {
  return <input placeholder={placeholder} value={value} onChange={onChange} />;
};

现在使用FormField时，TypeScript会自动根据传入的component推断出可传递的Props：

// 这里会自动提示Input支持的placeholder、value、onChange等Props
<FormField 
  component={Input} 
  placeholder="请输入用户名"
  onChange={(e) => console.log(e.target.value)}
/>

关键逻辑说明 #

• React.ElementType：约束泛型C可以是任意React组件（函数/类组件）或HTML标签名（如'input'、'div'）。
• React.ComponentProps<C>：自动提取目标组件C的所有Props类型。
• Omit<..., 'component'>：排除掉我们自定义的component属性，避免Props冲突。

这种方式完全不需要手动传入类型参数，TypeScript会通过传入的component实例自动完成类型推断，确保FormField的Props严格匹配目标组件的要求。

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