web-dev-qa-db-ja.com

Typescript React / Redux：タイプ 'typeof MyClass'の引数は、タイプ 'ComponentType <...'のパラメーターに割り当てることができません

ReduxとTypeScriptは初めてです。

私は 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 <{todos：any;のパラメーターに割り当てることができません。 }＆{アクション：typeof "（filepath）... '。タイプ' typeof TodoApp 'は、タイプ' StatelessComponent <{todos：any;}＆{アクション：typeof"（filepath）... 'に割り当てられません。タイプ 'typeof TodoApp'は、シグネチャ '（props：{todos：any;}＆{actions：typeof "（filepath）/ actions/index";}＆{children ?: ReactNode;}、context ?: any ）：ReactElement |ヌル'。

20エクスポートデフォルトのconnect（mapStateToProps、mapDispatchToProps）（TodoApp）

私の問題は、mapStateToPropsとconnectが何をしているかを完全には理解していないことですが、理解する前に、
このTypeScriptの「エラー」を修正するために、ここでコードを変更できるかどうか知りたいです。

reactjstypescriptredux
9
kris

あなたの反応コンポーネントは小道具を期待しないので、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)
11
alechill

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>
  }
}
0
tellmchau