withRouter 与 react-redux 连接导致打字稿出错答案

【问题标题】：withRouter with react-redux connect causing error with typescriptwithRouter 与 react-redux 连接导致打字稿出错
【发布时间】：2020-06-30 00:29:09
【问题描述】：

我正在修复 react-router-dom 中的一个错误，我需要用 withRouter 包装连接，我解决了这个解决方案的问题，但现在我遇到了打字稿问题，我'我收到此错误。

这是发生问题的代码部分

这里是我的整个组件文件

import * as React from 'react'
    import { connect } from 'react-redux'
    import { bindActionCreators } from 'redux'
    import { pageHeaderHeight } from '../../utils/theme'
    import { closeDrawerMenu, openDrawerMenu } from '../../redux/ActionCreators/DialogActions'
    import PageHeaderLogo from './PageHeaderLogo/pageHeaderLogo'
    import SearchInput from './SearchInput'
    import DrawerMenuItem from '../DrawerMenu/DrawerMenuItem'
    import { AppBar, Toolbar, Typography } from '@material-ui/core'
    import { withRouter } from 'react-router-dom'
    import {
        RootReducerInterface,
        OpenDrawerInterface,
        CloseDrawerInterface,
    } from '../../utils/interfaces'
    
    const PageHeader: React.FC<Props> = (props) => {
    
        return (
            <AppBar position='fixed' style={ appBarStyle } elevation={1}>
                <Toolbar style={ toolbarStyle }>
                    <PageHeaderLogo/>
                    <SearchInput/>
                    <div style={menuOptions}>
                        <DrawerMenuItem route='/tutorial'/>
                        <DrawerMenuItem route='/partners'/>
                        <DrawerMenuItem route='/register'/>
                        <DrawerMenuItem route='/login'/>
                    </div>
                </Toolbar>
            </AppBar>
        )
    }
    
    const mapStateToProps = (state: RootReducerInterface) => ({
        drawerIsOpen: state.DialogReducer.drawerIsOpen,
    })
    const mapDispatchToProps = (dispatch: any) => 
        bindActionCreators({ openDrawerMenu, closeDrawerMenu }, dispatch)
    
    export default withRouter(connect<StateProps, DispatchProps, OwnProps>(
        mapStateToProps,
        mapDispatchToProps
    )(PageHeader))
    
    /////////////////////////////////////////////////////////////////
    ///////////////////////////// STYLES ////////////////////////////
    /////////////////////////////////////////////////////////////////
    const appBarStyle = {
        padding: '0 10px',
        height: pageHeaderHeight,
        background: '#fff'
    }
    const toolbarStyle = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        height: '100%',
        padding: 0,
    }
    const menuOptions = {
        display: 'flex',
        flexDirections: 'row',
        width: '50%',
    }
    
    /////////////////////////////////////////////////////////////////
    /////////////////////////// INTERFACES //////////////////////////
    /////////////////////////////////////////////////////////////////
    interface OwnState {}
    
    interface OwnProps {}
    
    interface StateProps {
        drawerIsOpen: boolean
    }
    
    interface DispatchProps {
        openDrawerMenu: OpenDrawerInterface
        closeDrawerMenu: CloseDrawerInterface
    }
    
    type Props = StateProps & DispatchProps & OwnProps
    type State = OwnState

我刚刚选择了这个项目，我没有使用打字稿的经验，我不知道是什么导致了这个问题

【问题讨论】：

标签： reactjs typescript react-router-dom

【解决方案1】：

我通过在 (PageHeader) 之后包含任何内容来解决此问题，如果有人可以提供进一步的解释，那就太好了

 export default withRouter(
                connect<StateProps, DispatchProps, OwnProps>(
                mapStateToProps,
                mapDispatchToProps
            )(PageHeader) as any)

【讨论】：