Reactjs Typescript React/Redux：类型为'；MyClass的类型'；不可分配给类型为'；组件类型<'；

我对Redux和Typescript都是新手

我已经找到了一个相当好的基本精简版本，我正在尝试做的事情

代码如下所示：

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)

import*作为“../actions/index”中的ActionCreator
从“redux”导入{bindActionCreators}
从“React”导入React，{Component}
从“react redux”导入{connect}
类TodoApp扩展组件{
render（）{
返回（测试！）
}
}
函数MapStateTops（状态）{
返回{todos:state.todos}
}
功能图DispatchToprops（调度）{
返回{actions:bindActionCreators（actionCreators，dispatch）}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（TodoApp）

我的代码编辑器（VS带有TSLint扩展名的代码）和

tsc

都将final

（TodoApp）

作为错误突出显示，这是我得到的消息：

src/components/test.tsx（20,61）：错误TS2345:typeof类型的参数

---

“TodoApp”不可分配给“ComponentType”类型的参数您尚未键入

TodoApp

的道具

type Props = {
    todos: any[] // What ever the type of state.todos is
    actions: {
       addTodo: Dispatch<any>
    }
}

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

类型道具={
todos:any[]//state.todos的类型是什么
行动：{
地址：发送
}
}
类TodoApp扩展了React.Component{
render（）{
返回测试！
}
}

您的react组件不需要道具，因此您的

connect

出现错误，因为它推断

MapStateTrops

和

mapDispatchToProps

都应该返回空对象

您可以通过为react props添加type def来解决这个问题，但是隐式

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)

接口ITodo{ 描述：字符串 } 接口状态{ 待办事项：ITodo[] } 接口ITodoProps{ 待办事项：ITodo[] } 界面操作道具{ someAction:（）=>void } 类TodoApp扩展了React.Component{ render（）{ 返回（测试！） } } 函数mapStateToProps（状态：ITodosState）：ITodoProps{ 返回{todos:state.todos} } 函数mapDispatchToProps（dispatch:dispatch）：iTodActionProps{ 返回bindActionCreators（{someAction:actionCreators.someAction}，dispatch） } 导出默认连接（mapStateToProps、mapDispatchToProps）（TodoApp）

---

我的实际工作示例与上面发布的示例不太一样，我的解决方案实际上是将

接口ITodActionProps{someAction:（）=>void}

更改为

接口ITodActionProps{someAction:typeof actionCreators.someAction}

您的精彩回答马上就清楚了-谢谢！