react-redux connect() and error TS2345

Viewed 1315

I'm having trouble to figure out why this code fails to build with the following error:

(43,3): error TS2345: Argument of type 'typeof Day' is not assignable to parameter of type 'Component<Props | (Props & ConnectProps & DispatchProps)>'.
  Type 'typeof Day' is not assignable to type 'StatelessComponent<Props | (Props & ConnectProps & DispatchProps)>'.
    Type 'typeof Day' provides no match for the signature '(props: (Props & { children?: ReactNode; }) | (Props & ConnectProps & DispatchProps & { children?: ReactNode; }), context?: any): ReactElement<any>'.

I am running typescript 2.3.3 and the @types/react-redux are at version 4.4.41.

import * as React from "react";
import { connect } from "react-redux";

export interface Props {
  date: Date;
}

export interface ConnectProps {
  shifts: string[];
}

export interface DispatchProps {}

class Day extends React.Component<Props & ConnectProps & DispatchProps, null> {
  render() {
    /* simplified */
    return <div />;
  }
}

const mapStateToProps = (state: any, ownProps?: Props): ConnectProps => {
  /* simplified */
  return {
    shifts: []
  };
};

const mapDispatchToProps = (dispatch: any): DispatchProps => ({});

export default connect<ConnectProps, DispatchProps, Props>(
  mapStateToProps,
  mapDispatchToProps
)(Day);

let component = <Day date={new Date()} />

I want to avoid decorators as long as they are experimental.

2 Answers

I found it's an issue with "@types/react": "^16.9.2".

I downgraded and fixed it to "@types/react": "16.0.38", and worked.

Used the example as a guide https://redux.js.org/recipes/usage-with-typescript, but it was in this sandbox that I found they use a fixed version in: https://codesandbox.io/s/w02m7jm3q7

Not sure why, maybe types are not updated, not sure, new to TS, but by using this "@types/react": "16.0.38" the TS2345 Error was fixed. I may ask the poster.

Hope it helps.

Cheers

Javier

Related