如何使用 React JSX 在 Typescript 中实现通用箭头 function 作为接口属性

Question

我正在尝试创建一个

interface PromptInput {
  key: string,
  title: string,
  customInput?: <T>(value: T, onChange: (newValue: T) => void) => React.ReactNode;
}

我希望value和newValue的类型相同，但它们可以是任何东西。

我有一个组件InputPromptDialog它有一个道具inputs: PromptInput[]

但是当我尝试通过 arguments 时出现错误：

<InputPromptDialog
  inputs={[
    { key: 'fullName', title: 'Full Name' },
    { key: 'email', title: 'Email' },
    { key: 'role', title: 'Role', customInput: (value, onChange) => <RoleSelector onChange={(selectedRoleId: string) => onChange(selectedRoleId)} /> },
  ]}
/>

错误在于我传递给onChange的selectedRole值，并说

Argument of type 'string' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'string'.ts(2345)

为什么没有推断出 T 的值？ 如何强制value和newValue为同一类型，但仍为任何类型？

Answer 1

好的，我似乎找到了解决方法：

通过创建一个

type PromptInputCustomInput<T> = (value: T, onChange: (newValue: T) => void) => React.ReactNode;  

并将界面更改为：

interface PromptInput {
  key: string,
  title: string,
  customInput?: PromptInputCustomInput<any>;
}

并将我通过 arguments 的位置更改为：

<InputPromptDialog
  inputs={[
    { key: 'fullName', title: 'Full Name' },
    { key: 'email', title: 'Email' },
    { key: 'role', title: 'Role', customInput: ((value, onChange) => <RoleSelector onChange={(selectedRoleId: string) => onChange(selectedRoleId)} />) as PromptInputCustomInput<string> },
  ]}
/>

这会产生我正在寻找的预期结果。 但我仍然很想知道是否有一种方法可以做到这一点，而不必总是将我传递的值as PromptInputCustomInput<DESIRED_TYPE>