Type safety with <Field /> as prop

[chinanderm]

I love the simplicity of utilizing the <Field /> component as well as its as prop as a means of rendering my own input component that, in addition to standard input props, has an additional custom prop.

However, with Typescript, it seems the <Field /> component doesn't make available the as component's props to the <Field /> component so that I can ensure that the props being added are type-safe with my custom component.

Example (with irrelevant code removed for brevity):

interface MyCustomInputProps extends React.ComponentProps<'input'> {
  isInvalid?: boolean
}
const MyCustomInput = React.forwardRef<HTMLInputElement, MyCustomInputProps>(function Input(props, ref) {
  const { isInvalid, type = 'text', ...rest } = props
  return <input ref={ref} type={type} {...rest} />
})

const MyForm: React.FC = () => {
  return (
      <Field
        as={MyCustomInput}
        isInvalid="foobar" {/* prop is an optional boolean on MyCustomInput -- no type safety /*}
        name="myField"
        value={values.myField || '' }
        anInvalidProp="foobar" {/* prop does not existing on MyCustomInput -- no type safety /*}
      />
  )
}

Like in the example above, how can I ensure that the value I'm providing to isInvalid is type-safe? In addition, how can I ensure that the bogus prop I added, anInvalidProp, results in an error?

My initial thought was that <Field /> could accept a type argument, such as <Field<MyCustomInputProps> /> but the interface does not allow for that. I also tried the component prop but that also does not have the type inference/safety.

The long, painful way of doing this to get the type safety is to not use <Field /> and instead manually add the relevant field props but I was hoping to avoid that.

Thanks in advance!

[johnrom]

You can see some experiments with this over here

#3152

The field component is very complex, so it's not easy or maybe even possible to get every type working with Typescript just yet. It's getting there, though.