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

Typescript React/Redux : Argument of type 'typeof MyClass' is not assignable to parameter of type 'ComponentType<...'

提问by kris

I'm new to Redux and new to Typescript.

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

I've found a fairly good basic cut-down version of what I'm trying to do in the react-redux docs.

我在react-redux docs 中找到了我正在尝试做的相当不错的基本精简版本。

The code is like this :

代码是这样的：

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)

Both my code editor (VS Code with the TSLint extension) and tschighlight that final (TodoApp)as an error, and this is the message I get :

我的代码编辑器（带有 TSLint 扩展名的 VS 代码）并tsc突出显示最终(TodoApp)错误，这是我得到的消息：

src/components/test.tsx(20,61): error TS2345: Argument of type 'typeof TodoApp' is not assignable to parameter of type 'ComponentType<{ todos: any; } & { actions: typeof "(filepath)...'. Type 'typeof TodoApp' is not assignable to type 'StatelessComponent<{ todos: any; } & { actions: typeof "(filepath)...'. Type 'typeof TodoApp' provides no match for the signature '(props: { todos: any; } & { actions: typeof "(filepath)/actions/index"; } & { children?: ReactNode; }, context?: any): ReactElement | null'.

20 export default connect(mapStateToProps, mapDispatchToProps)(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' 不匹配签名 '(props: { todos: any; } & { actions: typeof "(filepath)/actions/index"; } & { children?: ReactNode; }, context?: any ): 反应元素 | 空值'。

20 导出默认connect(mapStateToProps, mapDispatchToProps)(TodoApp)

My problem is that I don't entirely understand exactly what mapStateToPropsand connectare doing, but prior to getting that understanding,
I'd like to know if there is a code change I can make here to fix this Typescript "error".

我的问题是我并不完全理解到底是什么mapStateToProps和connect正在做什么，但在获得这种理解之前，
我想知道是否可以在此处进行代码更改以修复此 Typescript“错误”。

回答by alechill

Your react component expects no props, so your connecthas an error as it infers that mapStateToPropsand mapDispatchToPropsshould both return empty objects

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

You can get around this by adding type defs for the react props, but there is also a lot of unsafe use of implicit any. If you were to fully type this application for safety's sake it would look something like this ....

您可以通过为 react props 添加类型 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)

回答by chautelly

You haven't typed TodoApp's props.

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