Type Error when using Typescript with React-Redux
To preserve type safety you can divide your props in parts, one responsible for normal props and one for dispatchers:
import * as React from 'react';import {connect} from 'react-redux';interface StateProps { textPros: string, optionalText?: string,}interface DispatchProps { onClick1: Function,}class MyComp extends React.Component<StateProps & DispatchProps , any> { render() { return (<div onClick={this.props.onClick1}>{this.props.textPros}</div>); }}const mapStateToProps = (state: any, ownProp? :any):StateProps => ({ textPros: "example text",});const mapDispatchToProps = (dispatch: any):DispatchProps => ({ onClick1: () => { dispatch({ type: 'CLICK_ACTION'}); }});export default connect(mapStateToProps, mapDispatchToProps)(MyComp);
For those who search for quick workaround: just add 'as any' to base component.
export default connect(mapStateToProps, mapDispatchToProps)(MyComp as any);
I found the answer in the second to last post on this Github issue. Without the type parameter on both the mapStateToProps
and/or mapDispatchToProps
or on connect
it will produce an intersection of the return types of the two map functions.