Definitelytyped: [react-redux] Some problem with Matching type

[clicktronix]

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

• [x] I tried using the @types/react-redux version 6.0.10.
• [x] I tried using the latest stable version of tsc 3.1.6. https://www.npmjs.com/package/typescript
• [x] @apapirovski @surgeboris @jrakotoharisoa @kenzierocks @clayne11 @tansongyang @nicholasboll @tkqubo @pdeva @kallikrein @val1984

Hello to all. We encountered an issue while typing our hoc, which uses react-redux hoc under the hood. We discovered, that our types are correct and even good connected with react-redux type, which seems very logic and good. But we found bug with Matching type: our code is HOS function, bug with Matching shown in the end of the constructor, seems that we have something looks like this simple example: Matching How can we fix this? Thanks!

import * as React from 'react';
import { connect, Matching } from 'react-redux';
import { MapStateToProps, MapDispatchToProps } from './namespace';

const myConnect = <IAppReduxState, TReduxState, TStateProps, TDispatchProps>(
  mapStateToProps: MapStateToProps<IAppReduxState, TReduxState, TStateProps, {}>,
  mapDispatchToProps: MapDispatchToProps<TDispatchProps, {}>,
) => {
  return function HOC<TOwn extends TStateProps & TDispatchProps>(WrappedComponent: React.ComponentType<TOwn>): React.ComponentType<TOwn> {
    class Connector extends React.PureComponent<TOwn> {
      private ConnectedComponent: React.ComponentType<any>;

      constructor(props: TOwn) {
        super(props);

        const connector = connect<TStateProps, TDispatchProps>(
          this.mapStateToProps,
          this.mapDispatchToProps,
        );
        this.ConnectedComponent = connector(WrappedComponent); // error here with the WrappedComponent component

        type T = Matching<TOwn, TOwn>; // Matching error example
        const o: T = null as any as TOwn;
      }

      public render() {
        const ConnectedComponent = this.ConnectedComponent;
        return <ConnectedComponent />;
      }

      private mapStateToProps(): TStateProps {
        return mapStateToProps({} as TReduxState);
      }

      private mapDispatchToProps(): TDispatchProps {
        return mapDispatchToProps({} as any);
      }
    }

    return Connector;
  };
};

error description:

Argument of type 'ComponentType<TOwn>' is not assignable to parameter of type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
  Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
    Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentClass<Matching<TStateProps & TDispatchProps, TOwn>, any>'.
      Type 'TOwn' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.
        Type 'TStateProps & TDispatchProps' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.
          Type 'TOwn[P]' is not assignable to type 'P extends keyof TStateProps | keyof TDispatchProps ? (TStateProps & TDispatchProps)[P] extends TOwn[P] ? TOwn[P] : (TStateProps & TDispatchProps)[P] : TOwn[P]'.
            Type '(TStateProps & TDispatchProps)[P]' is not assignable to type 'P extends keyof TStateProps | keyof TDispatchProps ? (TStateProps & TDispatchProps)[P] extends TOwn[P] ? TOwn[P] : (TStateProps & TDispatchProps)[P] : TOwn[P]'.

Link to the branch of our library with this error: https://github.com/fullstack-development/redux-multi-connect/tree/development

The latest version of @types/react-redux with which this component worked is 6.0.8

[surgeboris]

I've introduced a bug with mapDispatchToProps into types/[email protected] and now waiting for a fix to be merged (PR #30760).

It's hard for me to reason about your parameterized types at the moment and I'm pretty sure your problem is not related to my bug, but can you please try to use types/[email protected], just to be sure that your problem is not caused by my bug?

[clicktronix]

@surgeboris the same error on version 6.0.9:

Argument of type 'ComponentType<TOwn>' is not assignable to parameter of type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
  Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
    Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentClass<Matching<TStateProps & TDispatchProps, TOwn>, any>'.
      Type 'TOwn' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.
        Type 'TStateProps & TDispatchProps' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.
          Type 'TOwn[P]' is not assignable to type 'P extends keyof TStateProps | keyof TDispatchProps ? (TStateProps & TDispatchProps)[P] extends TOwn[P] ? TOwn[P] : (TStateProps & TDispatchProps)[P] : TOwn[P]'.
            Type '(TStateProps & TDispatchProps)[P]' is not assignable to type 'P extends keyof TStateProps | keyof TDispatchProps ? (TStateProps & TDispatchProps)[P] extends TOwn[P] ? TOwn[P] : (TStateProps & TDispatchProps)[P] : TOwn[P]'.

but on typescript 3.2.1 release of which was 5 hours ago) a slightly different description of the error, but it is in the same place:

Argument of type 'ComponentType<TOwn>' is not assignable to parameter of type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
  Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentType<Matching<TStateProps & TDispatchProps, TOwn>>'.
    Type 'ComponentClass<TOwn, any>' is not assignable to type 'ComponentClass<Matching<TStateProps & TDispatchProps, TOwn>, any>'.
      Type 'TOwn' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.
        Type 'TStateProps & TDispatchProps' is not assignable to type 'Matching<TStateProps & TDispatchProps, TOwn>'.

[surgeboris]

@clicktronix I've engaged with #31363, and now I trying to understand how it is related to your issue. Looking at the error output of your issue it seems to be exact same problem as in #31363, just in a more complicated context. If my hypothesis is right - then downgrading to @types/[email protected] might solve the problem for you. Can you check it?

Also, if we will find out that you have same problem as in #31363, can you please close this issue, as #31363 has more information about the bug and more people involved?

[clicktronix]

@surgeboris Rollback to version 6.0.8 helps, I described it in the issue above) I think the problem is the same as in #31363 , I will close it and go there