how to properly type component props when using connect HOC with redux

Viewed 72

I am following the official guide from here: https://react-redux.js.org/using-react-redux/static-typing but it doesn't seem to work for me. Here's a SSCCE. The below code fails static type checking with:

TS2339: Property 'a' does not exist on type 'never'.

I am using "react-redux": "^7.2.0" and "@types/react-redux": "^7.1.9". Code is:

import React, {FunctionComponent} from 'react';

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

type RootState = {a: number};

const mapStateToProps = (state: RootState) => {
    return {a: state.a};
};

const connector = connect(mapStateToProps, null);
type PropsFromRedux = ConnectedProps<typeof connector>


const MyComponent: FunctionComponent<PropsFromRedux> = (props: PropsFromRedux) => {
  return <span>{props.a}</span>;
};

export default connector(MyComponent);

Using a class component, as in:

class MyComponent extends React.Component<PropsFromRedux> {

  constructor(props: PropsFromRedux) {
    super(props);
  }

  render() {
    return <span>{this.props.a}</span>;
  }
}

... yields the exact same message.

0 Answers
Related