Typescript React/Redux:类型'typeof MyClass'的参数不能赋值给'ComponentType <...'类型的参数

Question

我是Redux的新手,也是Novelcript的新手.

我在react-redux文档中找到了一个相当不错的基本简化版本.

代码是这样的:

import * as actionCreators from '../actions/index'
import { bindActionCreators } from 'redux'
import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoApp extends Component {
    render() {
        return (<div>test!</div>)
    }
}
function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}


export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

我的代码编辑器(带有TSLint扩展的VS代码)和tsc突出显示最终(TodoApp)的错误,这是我得到的消息:

src/components/test.tsx(20,61):错误TS2345:类型'typeof TodoApp'的参数不能分配给'ComponentType <{todos:any; }&{actions:typeof"(filepath)...".类型'typeof TodoApp'不能分配给'StatelessComponent <{todos:any;}&{actions:typeof"(filepath)...'.类型 '的typeof TodoApp' 提供没有匹配的签名"(道具:{待办事项:任何;}&{动作: "/动作/索引(文件路径)" 的typeof;}&{儿童?: ReactNode;},上下文任何?: ):ReactElement | 空值'.

20 export default connect(mapStateToProps,mapDispatchToProps)(TodoApp)

我的问题是我并不完全理解究竟是什么mapStateToProps和connect正在做什么,但在获得这种理解之前,
我想知道是否有一个代码更改,我可以在这里修复这个Typescript"错误".

Answer 1

你的react组件不需要道具,所以你connect有一个错误,因为它推断出它mapStateToProps并且mapDispatchToProps都应该返回空对象

你可以通过为反应道具添加类型defs来解决这个问题,但是也存在很多不安全的隐式使用any.如果你为了安全起见完全输入这个应用程序,它看起来像这样....

interface ITodo {
  description: string
}

interface ITodosState {
  todos: ITodo[]
}

interface ITodoProps {
  todos: ITodo[]
}

interface ITodoActionProps {
  someAction: () => void
}

class TodoApp extends React.Component<ITodoProps & ITodoActionProps> {
    render() {
        return (<div>test!</div>)
    }
}

function mapStateToProps(state: ITodosState): ITodoProps {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch: Dispatch<ITodosState>): ITodoActionProps {
  return bindActionCreators({ someAction: actionCreators.someAction }, dispatch)
}

export default connect<ITodoProps, ITodoActionProps, {}>(mapStateToProps, mapDispatchToProps)(TodoApp)