Possible regression with ConnectedProps and React.ComponentProps<typeof ...> in 8.x

[cascornelissen]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 16.14.0
• ReactDOM: 16.14.0
• Redux: 4.2.0
• React Redux: 8.0.2
• TypeScript: 4.8.3

What is the current behavior?

The following simplified snippet throws a TS2312 error after upgrading to react-redux v8.

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';

interface Props extends React.ComponentProps<'div'>, ConnectedProps<typeof connector> {}

const ExampleComponent: React.FunctionComponent<Props> = ({ data, ...props }) => {
    return <div {...props} />
}

const mapStateToProps = (state: { data: unknown[] }) => ({
    data: state.data
});

const connector = connect(mapStateToProps);
const ConnectedExampleComponent = connector(ExampleComponent);

// This next line is where the error happens
interface Props2 extends React.ComponentProps<typeof ConnectedExampleComponent> {}

TS2312: An interface can only extend an object type or intersection of object types with statically known members.

There seem to be no apparent changes to the definition of ConnectedProps between @types/react-redux and react-redux so I'm not sure what could be causing this.

The changelog does mention changes to the types for connect where it no longer has the DefaultRootState included. But even changing the definition of connector in the example above to include a generic with any, {} or the actual global state interface does not resolve the issue.

What is the expected behavior?

It's still possible to use React.ComponentProps<typeof ...> like when using react-redux@7.2.8 with @types/react-redux@7.1.24

Which browser and OS are affected by this issue?

N/A

Did this work in previous versions of React Redux?

• Yes

[markerikson]

Huh. I certainly haven't seen that message before.

Uh.... summoning @phryneas and @Andarist HALP WAT THIS MEAN

(fwiw this is going to be pretty low priority for us to look at, given that we generally recommend using the hooks API instead of connect today, and we're focusing on RTK feature work atm.)

[phryneas]

I could for a second reproduce this with the React 16 types, but then it was gone and just working. I guess this is some edge case with old React types?

Generally: you are using React 16 - is there any practical reason why you are updating React-Redux first? Generally I would probably update the rest of the stack first/at the same time.

[cascornelissen]

(fwiw this is going to be pretty low priority for us to look at, given that we generally recommend using the hooks API instead of connect today, and we're focusing on RTK feature work atm.)

I understand. We have about 15 repositories with over 100 components still using connect (some of them class components) so it'd be nice to get this resolved but it's not blocking us as we're fine with staying on v7 if needed.

Generally: you are using React 16 - is there any practical reason why you are updating React-Redux first? Generally I would probably update the rest of the stack first/at the same time.

For a bit of context, we can't easily update to React 17+ at the moment because the decision was made to use Enzyme for unit testing about 4 years ago. Enzyme doesn't officially support React 17/18 and with several thousand unit tests it's still a bit of work till we've completely migrated to React Testing Library. The reason I ran into this is because we use Renovate to automatically update dependencies, I checked the changelog and it mentioned React-Redux v8 is still compatible with all versions of React that have hooks so I gave it a go. Everything else is as up-to-date as possible with the limitation we have on the React version.