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

Question

I am trying to create an

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

I want the types of value and newValue to be the same, but they can be anything.

I have a component InputPromptDialog which has a prop inputs: PromptInput[]

But when I try to pass arguments I get an error:

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

The error is with the selectedRole value I am passing to onChange , and says

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)

Why is the value of T not inferred? How can I enforce value and newValue to be the same type, but still be any type?

Answer 1

Ok, I seem to have figured out a fix:

By creating a

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

and changing the interface to:

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

and changing where I pass the arguments to:

<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> },
  ]}
/>

This creates the desired result I am looking for. But I would still be interested to know if there is a way of doing this without having to always cast the values I am passing as PromptInputCustomInput<DESIRED_TYPE>