[bug] typescript FieldRenderProps do not include custom props passed to Field

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

The typescript defs assume that only FieldRenderProps are passed to component, render, and children (https://github.com/final-form/react-final-form/blob/master/src/index.d.ts#L58-L69) when in fact FieldRenderProps AND “any non-API props passed into the <Field/> component” are passed to component, render, and children.

This results in type errors when custom props passed to Field are required by the component:

Property ‘label’ is missing in type ‘FieldRenderProps & { children?: ReactNode; }’.

23:11 Type '{ name: string; component: (props: FieldLayoutProps) => Element; label: string; Control: string; }' is not assignable to type 'IntrinsicAttributes & FieldProps & { children?: ReactNode; }'.
  Type '{ name: string; component: (props: FieldLayoutProps) => Element; label: string; Control: string; }' is not assignable to type 'FieldProps'.
    Types of property 'component' are incompatible.
      Type '(props: FieldLayoutProps) => Element' is not assignable to type 'string | ComponentClass<FieldRenderProps> | StatelessComponent<FieldRenderProps> | undefined'.
        Type '(props: FieldLayoutProps) => Element' is not assignable to type 'StatelessComponent<FieldRenderProps>'.
          Types of parameters 'props' and 'props' are incompatible.
            Type 'FieldRenderProps & { children?: ReactNode; }' is not assignable to type 'FieldLayoutProps'.
              Property 'label' is missing in type 'FieldRenderProps & { children?: ReactNode; }'.
    21 |       <div>
    22 |         <Field
  > 23 |           name="user.name"
       |           ^
    24 |           component={FieldLayout}
    25 |           label="Full Name"
    26 |           Control="input"

…assume FieldLayoutProps is minimally defined as:

export interface FieldLayoutProps extends FieldRenderProps {
  label: string;
  Control: string;
}

What is the expected behavior?

The typescript defs include “any non-API props passed into the <Field/> component” in FieldRenderProps so that there is no compile-time type error when component requires props passed to Field.

This would match:

1. the docs: https://github.com/final-form/react-final-form#children-props-fieldrenderprops--reactnode--reactnode
2. the runtime behavior: https://github.com/final-form/react-final-form/blob/master/src/Field.js#L161-L172

What’s your environment?

react-final-form@3.1.0, typescript@2.7.1

using the tsc compiler options noImplicitAny and strictNullChecks

[leonid-shevtsov]

A workaround I’ve found is to declare custom props optional (and add a big FIXME)

// FIXME making custom props optional until this is resolved: 
// https://github.com/final-form/react-final-form/issues/175
export interface FieldLayoutProps extends FieldRenderProps {
  label?: string;
  Control?: string;
}

[ebrillhart]

We are also encountering this problem and would very much appreciate a fix or workaround suggestions