React组件泛型Props扩展：解决TypeScript泛型推断为unknown问题

问题根源是TypeScript无法自动将EditableField的泛型T传递给内部的ReadOnlyField，导致后者的泛型被推断为unknown。以下是两种满足要求的解决方案：

方法一：显式指定ReadOnlyField的泛型参数 #

修改EditableField的渲染逻辑，在调用ReadOnlyField时明确传入泛型<T>，直接关联两个组件的泛型类型：

type EditableFieldProps<T> = ReadOnlyFieldProps<T> & {
  onChange: (newValue: T) => void;
}

const EditableField = <T extends any>({ onChange, ...props }: EditableFieldProps<T>) => {
  return (<>
    <ReadOnlyField<T> {...props} />
    {/* some other stuff */}
  </>);
}

方法二：优化组件泛型写法，利用结构类型推断 #

保持Props定义不变，调整EditableField的泛型声明方式，让TypeScript自动识别props的子类型：

type EditableFieldProps<T> = ReadOnlyFieldProps<T> & {
  onChange: (newValue: T) => void;
}

const EditableField = <T,>(props: EditableFieldProps<T>) => {
  const { onChange, ...restProps } = props;
  return (<>
    <ReadOnlyField {...restProps} />
    {/* some other stuff */}
  </>);
}

方案说明 #

两种方案均满足需求：

• 继承了ReadOnlyFieldProps类型；
• 彻底避免ReadOnlyField的泛型被推断为unknown。

第一种方案更直观，适合需要明确控制泛型传递的场景；第二种方案依赖TypeScript的结构类型系统，代码更简洁。

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