CODEWITHSUNDEEP
reactjstypescriptreact-redux
mbh
mbh

Reputation: 982

react-redux connect() and error TS2345

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.

Upvotes: 2

Views: 1483

Answers (2)

jhack
jhack

Reputation: 69

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

Upvotes: 0

basarat
basarat

Reputation: 275867

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

Wrong way to approach it. They work just like JSX works. The current type definitions assume you are going to use decorators.

More

If you still don't want to use decorators you will have to write your own type definitions and then override the ones from redux, neither of which are simple challenges. You are welcome to tackle them for fun though but require more time than can be presented in a helpful SO answer.

Upvotes: 2

Related Questions