reactjs - Typescript React/Redux: لا يمكن تعيين معامل من النوع 'typeof MyClass' إلى معامل من النوع 'ComponentType<...>'

أنا جديد في Redux وجديد في Typescript.

لقد وجدت نسخة مبسطة جيدة إلى حد ما مما أحاول القيام به في وثائق 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)

كلا محرر الشيفرة الخاص بي (VS Code مع امتداد TSLint) و 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' لا يتوافق مع التوقيع '(props: { todos: any; } & { actions: typeof "(filepath)/actions/index"; } & { children?: ReactNode; }, context?: any): ReactElement | null'.

20 تصدير افتراضي connect(mapStateToProps, mapDispatchToProps)(TodoApp)

مشكلتي هي أنني لا أفهم تمامًا ما الذي يفعله mapStateToProps و connect بالضبط، ولكن قبل أن أحصل على هذا الفهم،
أود أن أعرف إذا كان هناك تعديل على الكود يمكنني القيام به هنا لإصلاح هذا "الخطأ" في Typescript.

الإجابة رقم 1

مكون React الخاص بك لا يتوقع أي خصائص، لذلك يحتوي 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)