Definitelytyped: [@types/redux-form] <Field> is inferred to require WrappedFieldProps in TS 2.7 and 2.8

[ZhangYiJiang]

The <Field> component's component prop may be incorrectly typed, or this may be a TS bug.

Minimum reproducible code:

class TestComponent extends React.Component<WrappedFieldProps> {
}

const test = (
  <Field name="test" component={TestComponent} />
);

Error:

$ tsc 
index.tsx(8,10): error TS2322: Type '{ name: "test"; component: typeof TestComponent; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Field<WrappedFieldProps>> & Readonly<{ children?: ...'.
  Type '{ name: "test"; component: typeof TestComponent; }' is not assignable to type 'Readonly<BaseFieldProps<WrappedFieldProps> & WrappedFieldProps>'.
    Property 'input' is missing in type '{ name: "test"; component: typeof TestComponent; }'.

The code above is valid - see usage code in the package documentation: https://redux-form.com/7.3.0/docs/api/field.md/#usage

The error looks like it is caused by the definition of Field and BaseFieldProps - https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/redux-form/lib/Field.d.ts#L38.

The component prop is defined as ComponentType<WrappedFieldProps & P>, which means P should not need to include props from WrappedFieldProps, but TS does not seem to be able to infer that. Since Field is defined as extends Component<BaseFieldProps<P> & P>, TS now complains that the Field component used in the application code does not include props from WrappedFieldProps.

The error occurs in TS 2.7 and 2.8, but not TS 2.6.

---

If you know how to fix the issue, make a pull request instead.

• [X] I tried using the @types/redux-form package and had problems.
• [X] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [X] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @carsonf @aikoven @LKay @bancek @alsiola @tehbi4 @huwmartin
  
  

[dribba]

Was facing the same issue and ended up using the workaround below since it typechecks my component's own props, but seems ugly because you'll need to null check props from WrappedFieldProps

type OwnProps = { myProp: string }
const TestComponent: React.ComponentType<Partial<WrappedFieldProps> & OwnProps> = ({input, myProp}) => (< ... onChange={input && input.onChange} />)

const test = (
  <Field name="test" component={TestComponent} myProp={'testing'} />
);

Then I tried upgrading to [email protected] and I'm not seeing the issue at all, I suggest upgrading if you can.

[Yelmuf]

Seems like bare upgrade to TS 2.9.2 with @types/redux-form 7.2.6 didn't help.
Now trying to somehow override this behaviour globally via module.d.ts.

[piotros]

Is there any new solution for this problem?

[basvdijk]

Running into the same issue when I try to mimic the code of https://codesandbox.io/s/W6YnZm1po with Typescript.

const renderTextField = (
  { input, label, meta: { touched, error }, ...custom },
) => (
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />
);


<Field name="lastName" component={renderTextField} label="Last Name" />

Property 'input' is missing in type '{ name: string; component: ({ input, label, meta: { touched, error }, ...custom }: { [x: string]: any; input: any; label: any; meta: { touched: any; error: any; }; }) => Element; type: string; }'.

[drew-r]

I find replacing L40 of Field.d.ts fixes:

component?: ComponentType<WrappedFieldProps & Omit<P, keyof WrappedFieldProps>> | 'input' | 'select' | 'textarea';

[iKonrad]

@drew-r I'm getting following error with your change:

TS2344: Type '"input" | "meta"' does not satisfy the constraint 'keyof P'.   Type '"input"' is not assignable to type 'keyof P'.

Is there a fix for this by any chance?

Here's my component:

const renderField: React.FunctionComponent<ReduxForm.WrappedFieldsProps> = ({ input,
  label, type, meta: { touched, error }, id, placeholder }) => {
  const rowClasses = classnames({
    'form-group-invalid': touched && error,
  });

  return (
    <FormGroup className={rowClasses}>
      <Label for={id || ''}>{label}</Label>
      <Input
        id={id}
        {...input}
        placeholder={placeholder}
        type={type || 'text'}
        invalid={!!error} />
      {touched && error && <FormFeedback invalid>{error}</FormFeedback>}
    </FormGroup>
  );
};

and no matter what I do, I'm still getting the same error.

[shlajin]

Unless this gets resolved I may suggest do this:
YourComponent as 'input' & React.ComponentClass<IInputProps>.

Looks weird, but works