Type Error when using Typescript with React-Redux Type Error when using Typescript with React-Redux typescript typescript

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.