Definitelytyped: [react] defaultProps check breaks redux connected components

Created on 30 Nov 2018  路  4Comments  路  Source: DefinitelyTyped/DefinitelyTyped

  • [X] I tried using the @types/react 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: @johnnyreilly, @bbenezech, @pzavolinsky, @digiguru, @ericanderson, @tkrotoff, @DovydasNavickas, @onigoetz, @theruther4d, @guilhermehubner, @ferdaber, @jrakotoharisoa, @pascaloliv, @hotell, @franklixuefei, @Kovensky

Upgrading from @types/react 16.7.7 to 16.7.10 (@types/react-redux at 6.0.10 and redux at 4.0.1) breaks connected components with default props:

interface FooProps {
    x: number;
}

class Foo extends React.Component<FooProps> {
    static defaultProps = {
        x: 123,
    };
}

const ConnectedFoo = connect(
    () => ({
        x: 42,
    })
)(Foo);

const x = <ConnectedFoo/>;

typescript 3.2.1 complains in the last line:

Property '[Invalid_defaultProps]' is missing in type '{}' but required in type 'Readonly<Invalid_defaultProps<Pick<FooProps, never>, { x: number; }> & Pick<Pick<FooProps, never>, never> & Partial<Pick<Pick<FooProps, never>, never>>>'.

It's possible that this is fixable and should be fixed in @types/react-redux. If that's the case, please reassign.

Most helpful comment

I've got the same error upgrading from version 16.7.8 > 16.7.10 in ant-design components

TS2741: Property '[Invalid_defaultProps]' is missing in type '{ size: number; src: any; }' but required in type 'Invalid_defaultProps<Readonly<{ children?: ReactNode; }> & Readonly<AvatarProps>, { prefixCls: string; shape: string; size: string; }>'.

All 4 comments

I've got the same error upgrading from version 16.7.8 > 16.7.10 in ant-design components

TS2741: Property '[Invalid_defaultProps]' is missing in type '{ size: number; src: any; }' but required in type 'Invalid_defaultProps<Readonly<{ children?: ReactNode; }> & Readonly<AvatarProps>, { prefixCls: string; shape: string; size: string; }>'.

The same error comes with react-apollo, or every other single package on NPM that defines defaultProps or propTypes....

It looks like the problem is that @types/react-redux is calling JSX.LibraryManagedAttributes with the original component type and the new (post-connect) props type, which is inconsistent. Something like this change may work as a fix. It is causing this test case to fail, but I believe the test case is wrong: if the mapStateToProps function is declared as requiring the bar prop, then the connected component requires that prop for the mapStateToProps function even if the wrapped component does not require the prop (unless react-redux is doing something tricky with defaultProps that I'm not aware of).

@mattmccutchen I experience the same problem as @dougefr (see his comment).

However, my project does not use redux, nor @types/react-redux is a (transitive) dependency (read: it isn't present in the node_modules folder).

Does this still makes sense regarding your investigation?

Thx for looking into it!

Was this page helpful?
0 / 5 - 0 ratings