Here is a link to a Typescript Playground that shows the issue.
import { ChangeEvent } from "react"
import { Control, useController } from "react-hook-form"
export interface RequiredEditorProps<Value> {
onChange: (event?: ChangeEvent | Value) => void
onBlur: () => void
name: string
value: Value
}
type Props<Value, EditorProps extends RequiredEditorProps<Value>> = Omit<
EditorProps,
"onChange" | "onBlur" | "name" | "value"
> & {
Editor: (props: EditorProps) => JSX.Element
control: Control
fieldName: string
initialValue: Value
}
export const RHFAdapter = <Value extends any, EditorProps extends RequiredEditorProps<Value>>({
Editor,
control,
fieldName,
initialValue,
...editorProps
}: Props<Value, EditorProps>) => {
const {
field: { onChange, onBlur, name, value },
// fieldState: { invalid, isTouched, isDirty },
// formState: { touchedFields, dirtyFields }
} = useController({
name: fieldName,
control,
defaultValue: initialValue,
})
return <Editor onChange={onChange} onBlur={onBlur} name={name} value={value} {...editorProps} />
}
Basically it complains about the render of Editor because the spread props might be a different subtype of the RequiredEditorProps constraint. This is definitely a part of TS that I find it difficult to grasp. It would seem to me that any additional properties of EditorProps would be spread into ...editorProps and then into the render so I don't really understand what the issue is.