Definitelytyped: @types/redux-form FieldArray don't accept React.PureComponent<WrappedFieldArrayProps<any>>

[n06rin]

• [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
  
  

I try to using @types/redux-form with [email protected] and have an error when setting type for a FieldArray component. I prepare a bare simple example:

const RenderMembersFunc = (props: WrappedFieldArrayProps<any>) => (
  <div>
    here we should map our members
  </div>
);

const SimpleComponent = (props: {}) => (
  <div>
    simpleComponent
  </div>
) 

const FieldArraysForm = (props: InjectedFormProps<{}>) => {
  return (
    <form onSubmit={props.handleSubmit}>
      <FieldArray name="members" component={RenderMembersFunc} />
      <FieldArray name="members" component={SimpleComponent} />
    </form>
  );
};

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
})(FieldArraysForm);

for a first usage FieldArray with RenderMembersFunc I'm get an error:

[ts]
Type '{ name: "members"; component: (props: WrappedFieldArrayProps<any>) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldArray<WrappedFieldArrayProps<any>>> & Readonl...'.
  Type '{ name: "members"; component: (props: WrappedFieldArrayProps<any>) => Element; }' is not assignable to type 'Readonly<BaseFieldArrayProps<WrappedFieldArrayProps<any>> & WrappedFieldArrayProps<any>>'.
    Property 'fields' is missing in type '{ name: "members"; component: (props: WrappedFieldArrayProps<any>) => Element; }'.

I made a simple repo with that error here: https://github.com/n06rin/redux-form-typescript-error

Maybe I set wrong types? I'm try to find typed typescript examples, but don't find.

[lukx]

I am also seeing this since I upgraded to typescript 2.7.x (was: 2.6.2), but for a Normal Field using a custom component.

I reduced the differences between the working and non-working states to just the typescript-upgrade, so the TypeScript Changelog for version 2.7 might be something to look into.

[n06rin]

@lukx for a Field with custom component I made an example here: https://github.com/n06rin/redux-form-typescript-error/blob/master/src/CustomFieldExample.tsx hope that helps.

[rvanheest]

I have the same issue for FieldArray. The interesting thing is: for a normal Field, I don't have this issue... And that's the weirdest part to me: the Field is not that much different from FieldArray in terms of the interfaces that @types/redux-form provides.

@n06rin I'm interested to hear if you found a solution already!

@lukx In the meantime TypeScript released v2.7.2, in which this issue still remains.

[mattdell]

+1

[henrikra]

Same error when using Field component with component prop's value as custom stateless component.

[rvanheest]

using Field component with component prop's value as custom stateless component.

@henrikra not sure what you mean with that, but I don't experience any errors (as of yet 😉) with 'normal' Field components.

Full disclosure, here is my code with:

• form with only Field components
• form with a FieldArray component
• library functions to (what I would call) 'custom stateless components'

Perhaps this helps you to see what is going on with your Field errors.

[rvanheest]

I've been diving into this issue again. For this I used the example repository by @n06rin.

First of all I started to look into claim @lukx made about TypeScript versions. Going back all the way to 2.4 I still had the same errors.
Then, after reverting back to the latest TypeScript version (2.7.2), I started looking at the type definitions provided by @types/redux-form. I found a couple of interesting things here. Comparing the definitions for Field and FieldArray, they're almost the same (apart from some properties/interfaces that are different). One striking difference, however, is how BaseFieldProps and BaseFieldArrayProps define their respective component property. The former has:

(Field)

interface BaseFieldProps<P = {}> extends ... {
    // ...
    component?: ComponentType<WrappedFieldProps & P> | "input" | "select" | "textarea";
    // ...
}

while the latter has:

(FieldArray)

interface BaseFieldArrayProps<P = {}> {
    // ...
    component: ComponentType<P>;
    // ...
}

The main difference here is that for Field, the WrappedFieldProps are part of the type parameter in ComponentType, while its counterpart in FieldArray (WrappedFieldArrayProps) is not.

When I add this, it 'kind of' works.

interface BaseFieldArrayProps<P = {}> {
    // ...
-   component: ComponentType<P>;
+   component: ComponentType<WrappedFieldArrayProps<any> & P>;
    // ...
}

The other change I needed to make is in the example code by @n06rin:

-class RenderMembers extends React.PureComponent<WrappedFieldArrayProps<any>> {
+class RenderMembers extends React.PureComponent<WrappedFieldArrayProps<any> & BaseFieldArrayProps> {
  render(){
    return (
      <div>
        here we should map our members
      </div>
    );
  }
}

-const RenderMembersFunc = (props: WrappedFieldArrayProps<any>) => (
+const RenderMembersFunc = (props: WrappedFieldArrayProps<any> & BaseFieldArrayProps) => (
  <div>
    here we should map our members
  </div>
);

I'm not particularly happy with these changes yet, especially with the any type parameter in ComponentType<WrappedFieldArrayProps<any> & P>, but that seemed the only obvious choice for now, since all other type parameters for WrappedFieldArrayProps equate to any as well.

Question is whether this is the true solution (which is why I'm not doing a pull request yet). This change seems to be working (also in my own project), but I'm still confused by it. For example, any clue why I also need to add BaseFieldArrayProps in the example code?

[rvanheest]

After a failed PR I discovered a different pattern for solving this issue with FieldArrays. See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24309#issuecomment-375969220 for more details.

[futpib]

This patch would have helped me:

--- lib/FieldArray.d.ts.bak 2019-02-21 13:16:18.796979909 +0300
+++ lib/FieldArray.d.ts 2019-02-21 13:16:24.876979785 +0300
@@ -11,13 +11,13 @@
     rerenderOnEveryChange?: boolean;
 }

-export interface GenericFieldArray<Field, P = {}> extends Component<BaseFieldArrayProps<P> & Partial<P>> {
+export interface GenericFieldArray<Field, P = {}> extends Component<BaseFieldArrayProps<P>> {
     name: string;
     valid: boolean;
     getRenderedComponent(): Component<WrappedFieldArrayProps<Field> & P>;
 }

-export class FieldArray<P = {}> extends Component<BaseFieldArrayProps<P> & Partial<P>> implements GenericFieldArray<any, P> {
+export class FieldArray<P = {}> extends Component<BaseFieldArrayProps<P>> implements GenericFieldArray<any, P> {
     name: string;
     valid: boolean;
     getRenderedComponent(): Component<WrappedFieldArrayProps<any> & P>;

As a workaround I had to put this in my typings.d.ts:

Click to expand

// Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/23592
declare module 'redux-form' {
    export {
        FieldType,
        ErrorOther,
        FormErrors,
        WarningOther,
        FormWarnings,
        RegisteredFieldState
    } from '@types/redux-form';

    export * from '@types/redux-form/lib/reduxForm';
    export * from '@types/redux-form/lib/Field';
    export * from '@types/redux-form/lib/Fields';
    export * from '@types/redux-form/lib/Form';
    export * from '@types/redux-form/lib/FormName';
    export * from '@types/redux-form/lib/FormSection';
    export * from '@types/redux-form/lib/formValues';
    export * from '@types/redux-form/lib/formValueSelector';
    export * from '@types/redux-form/lib/reducer';
    export * from '@types/redux-form/lib/SubmissionError';
    export * from '@types/redux-form/lib/actions';
    export * from '@types/redux-form/lib/actionTypes';
    export * from '@types/redux-form/lib/selectors';

    import {Component, ComponentType} from 'react';
    import {
        Validator,
        FieldsProps,
        BaseFieldArrayProps,
        FieldArrayMetaProps
    } from '@types/redux-form';

    export interface WrappedFieldArrayProps<FieldValue> {
        fields: FieldsProps<FieldValue>;
        meta: FieldArrayMetaProps;
    }

    export interface GenericFieldArray<Field, P = {}> extends Component<BaseFieldArrayProps<P>> {
        name: string;
        valid: boolean;
        getRenderedComponent(): Component<WrappedFieldArrayProps<Field> & P>;
    }

    export class FieldArray<P = {}> extends Component<BaseFieldArrayProps<P>> implements GenericFieldArray<any, P> {
        name: string;
        valid: boolean;
        getRenderedComponent(): Component<WrappedFieldArrayProps<any> & P>;
    }
}

I'm running these versions:

├── @types/[email protected] 
├── [email protected] 
└── [email protected]

and this issue popped up after upgrading typescript from 3.0.3 to 3.3.3