Typescript React/Redux： 'typeof MyClass'型の引数が 'ComponentType <...'型のパラメータに割り当てられません。

Question

私は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 '型のパラメータに割り当てられません。< { todos：any; } & {actions：typeof "（filepath）..."タイプ 'typeof TodoApp'はタイプ 'StatelessComponent < {todos：any;}に割り当てられません。 {actions：typeof "（filepath）...' 'typeof TodoApp'は、署名に一致しません。 '（小道具：{todos：any;} & {actions：typeof "（filepath）/ actions/index";} & { children ?: ReactNode;}、context？ ：任意）：ReactElement |ヌル'。私の問題は、私は完全にmapStateToPropsとconnectがやっている正確に理解が、前
、その理解を得ることにしていないということです

20輸出デフォルト接続（mapStateToProps、 mapDispatchToProps）（TodoApp） このTypescriptの「エラー」を修正するためにここでコードを変更できるかどうかを知りたいです。

Answer 1

あなたはそれがmapStateToPropsとmapDispatchToPropsの両方が空のオブジェクトに

を返す必要があることをあなたが反応する小道具の型DEFSを追加することでこれを回避することができます推測すると、あなたのconnectがエラーを持っているように、コンポーネントは、何の小道具を期待していない反応し、暗黙的に多くの安全でない使用があります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) 

Answer 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> 
    } 
}