React-Redux接続でRedux-Formを使用すると、TypeScriptエラーが発生する

Question

Reux-FormとReact-Reduxとの間に非常に不本意な非互換性が見つかるまで、私はTypeScriptに惚れていました。

私の目標は、reduxForm装飾構成要素を反応装飾connectデコレータでラップしています。このパターンはいつもバベル構成で機能し、HOC方法論に従っているようです。ここでは例です：

import * as React from 'react'; 
import { Dispatch } from 'redux'; 
import { connect } from 'react-redux'; 
import { reduxForm, Field, InjectedFormProps } from 'redux-form'; 

interface SampleFormData { 
    username: string; 
} 

interface SampleFormProps { 
    saveData: (data: SampleFormData) => void; 
} 

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>; 

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
    <form onSubmit={props.handleSubmit(props.saveData)}> 
    <Field name="username" component="input" /> 
    </form> 
); 

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm); 

export default connect(
() => ({}), 
    (dispatch) => ({ 
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data }) 
    }) 
)(DecoratedSampleForm); 

はここで活字体が投げているエラーです：

> Argument of type 'DecoratedComponentClass<SampleFormData, 
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to 
> parameter of type 'ComponentType<{ saveData: (data: SampleFormData) => 
> { type: string; data: SampleFormData; }; }>'. 
> 
> Type 'DecoratedComponentClass<SampleFormData, 
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to type 
> 'StatelessComponent<{ saveData: (data: SampleFormData) => { type: 
> string; data: SampleFormData; };...'. 
> 
> Type 'DecoratedComponentClass<SampleFormData, 
> Partial<ConfigProps<SampleFormData, {}>>>' provides no match for the 
> signature '(props: { saveData: (data: SampleFormData) => { type: 
> string; data: SampleFormData; }; } & { children?: ReactNode; }, 
> context?: any): ReactElement<any>'. 

誰もが反応し、ReduxのをDecoratedComponentClassタイプを受け入れるようにするために解決策を見つけていますか？私はsuggestion "中"のコンポーネントを使用するが、私はこれをサンクのアクションで動作するように管理していないことがわかりました。私はこれがフォームの小道具をタイプするという点で解決するよりも多くの問題を作り出すことを発見しました。

Answer 1

この問題を抱えている人には、空文字のTStatePropsとTDispatchPropsオブジェクトを使用してconnect文を指定することで、エラーを解決できたことがわかりました。

interface SampleFormData { 
    username: string; 
} 

interface SampleFormProps { 
    saveData: (data: SampleFormData) => void; 
} 

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>; 

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
    <form onSubmit={props.handleSubmit(props.saveData)}> 
    <Field name="username" component="input" /> 
    </form> 
); 

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm); 

export default connect<{},{}>(
() => ({}), 
    (dispatch) => ({ 
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data }) 
    }) 
)(DecoratedSampleForm); 

この1つの欠点は、それが盲目的に接続小道具を供給するために私たちを強制的に私は、これはオーバーライド@types宣言を書くよりも、よりエレガントな解決策だと感じたということです。

この欠点に対処するために、私は空のオブジェクトに対して正しいインターフェイスで接続することで型を検証できました。ただし、このメソッドは、DecoratedComponentClassエラーを解決しないため、バインディングをチェックするために一時的にしか実行できません。

export default connect<{}, SampleFormProps, InjectedFormProps<SampleFormData>>(
() => ({}), 
    (dispatch) => ({ 
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data }) 
    }) 
)(DecoratedSampleForm);