Typescript React/Redux：“typeof MyClass”类型的参数不可分配给“ComponentType<...”类型的参数

Posted 2023-02-22

【中文标题】Typescript React/Redux：“typeof MyClass”类型的参数不可分配给“ComponentType<...”类型的参数

【英文标题】：Typescript React/Redux : Argument of type 'typeof MyClass' is not assignable to parameter of type 'ComponentType<...'

【发布时间】：2018-05-15 14:00:08

【问题描述】：

我是 Redux 的新手，也是 Typescript 的新手。

我在the react-redux docs 中找到了一个相当不错的基本精简版。

代码是这样的：

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

20 导出默认连接(mapStateToProps, mapDispatchToProps)(TodoApp)

我的问题是我并不完全了解 mapStateToProps 和 connect 正在做什么，但在了解之前，我想知道是否有代码更改我可以在这里修复这个 Typescript “错误”。

【参考方案1】：

您的反应组件不需要任何道具，因此您的 connect 有一个错误，因为它推断 mapStateToProps 和 mapDispatchToProps 都应该返回空对象

你可以通过为 react 属性添加类型定义来解决这个问题，但是隐式 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)

【讨论】：

我的实际工作示例与我上面发布的不太一样，我的解决方案实际上是将interface ITodoActionProps someAction: () => void 更改为interface ITodoActionProps someAction: typeof actionCreators.someAction 您的出色回答立即说明了这一点-谢谢！跨度>

【参考方案2】：

你还没有输入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>