TypeScript中React JSX接口属性泛型箭头函数实现及类型推断问题

你遇到的问题核心在于泛型作用域的错误：原来的PromptInput接口中，customInput的泛型T是定义在函数级别上的。这意味着TypeScript会把这个函数理解为"可以接受任意类型T的通用函数"，而不是"针对某个特定类型T的专用函数"。

所以当你在RoleSelector的onChange里传入string类型的selectedRoleId时，TypeScript会疑惑：这个customInput函数的T可能是任何类型（比如number、boolean甚至自定义类型），你怎么能确定传入的string符合T的要求？这就是报错的根源——泛型没有被绑定到具体的输入项上。

要让每个PromptInput实例都对应一个固定的类型，同时保证value和newValue类型一致，我们需要把泛型从函数级别提升到接口级别。这样每个输入项都会绑定自己的T，TypeScript就能正确推断类型了。

步骤1：修改PromptInput接口 #

把泛型T定义在接口上，并给它一个默认值（比如unknown），这样不需要自定义输入的项可以直接使用默认类型：

interface PromptInput<T = unknown> { 
  key: string; 
  title: string; 
  // 这里的T现在是接口绑定的固定类型，不再是函数的通用泛型
  customInput?: (value: T, onChange: (newValue: T) => void) => React.ReactNode; 
}

步骤2：调整InputPromptDialog的Props #

如果你的组件需要接受不同类型的输入项，直接把inputs定义为PromptInput[]即可（因为T有默认值，所以可以省略泛型参数）：

interface InputPromptDialogProps {
  inputs: PromptInput[];
}

const InputPromptDialog = ({ inputs }: InputPromptDialogProps) => {
  // 组件逻辑
};

步骤3：正确传参 #

现在TypeScript会自动推断每个customInput对应的T类型，你不需要额外标注也能正常使用：

<InputPromptDialog inputs={[ 
  { key: 'fullName', title: 'Full Name' },
  { key: 'email', title: 'Email' },
  { 
    key: 'role', 
    title: 'Role', 
    customInput: (value, onChange) => (
      // 这里TS会自动推断T是string，因为onChange传入的是string
      <RoleSelector onChange={(selectedRoleId) => onChange(selectedRoleId)} /> 
    ) 
  },
]} />

进阶：强类型表单（可选） #

如果你希望整个表单的输入类型完全可控，可以给InputPromptDialog也加上泛型，绑定表单值的类型：

// 定义表单值的类型
type FormValues = {
  fullName: string;
  email: string;
  role: string;
};

// 让组件Props绑定FormValues的键和类型
interface InputPromptDialogProps<T extends Record<string, unknown>> {
  inputs: { [K in keyof T]: PromptInput<T[K]> };
}

const InputPromptDialog = <T extends Record<string, unknown>>({ inputs }: InputPromptDialogProps<T>) => {
  // 组件逻辑，可以基于T做类型安全的表单处理
};

// 使用时，TS会严格检查每个输入项的类型是否匹配FormValues
<InputPromptDialog<FormValues> inputs={{ 
  fullName: { key: 'fullName', title: 'Full Name' },
  email: { key: 'email', title: 'Email' },
  role: { 
    key: 'role', 
    title: 'Role', 
    customInput: (value, onChange) => (
      <RoleSelector onChange={(selectedRoleId) => onChange(selectedRoleId)} /> 
    ) 
  },
}} />

当泛型定义在接口级别时，每个PromptInput实例都会被绑定到一个具体的T类型——比如Role对应的PromptInput<string>。此时customInput的value和onChange的参数都被约束为string，TypeScript不再会认为T是任意类型，自然就不会报错了。

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