一般的なTypescriptの反応成分にHOCを使用する

Question

私はジェネリックでタイプされたReact成分を持っています。そのコンポーネントは、高次コンポーネント（この場合はredux-form）で拡張されます。ここに私のクラスのバック取り除いたバージョンだとHOCが適用されている：

import * as React from "react"; 

interface MyFormProps<D> { 
    prop: D; 
    form: string; 
} 

class MyForm<D> extends React.Component<MyFormProps<D>, {}> { 
    render(): JSX.Element { 
     return (
      <form> 
       {this.props.prop} 
      </form> 
     ); 
    } 
} 

export const ConnectedMyForm = reduxForm({} as Config<any, {}, {}>)(MyForm); 

その後、私は別のコンポーネントで私のコンポーネントの型指定されたバージョンを作成してみてください。

import { ConnectedMyForm } from "./my-form"; 

interface FormType { 
    // Form props here 
} 

type TypedForm = new() => ConnectedMyForm<FormType>; 
const TypedForm = ConnectedMyForm as TypedForm; 

次のようにTSXにそれを使用することができるようにするために：

<TypedForm /> 

この方法は、HOCが適用されるが、ここで私が手に持っていない私が構築した別のコンポーネントに絶対に正常に動作します次のエラー：

オンtype TypedForm = new() => ConnectedMyForm<FormType>;行。

これは、コンポーネントにHOC機能を適用した場合にのみ発生します。私はフォームの接続されたバージョンで一般的な型指定を指定していないので、それを推測しています。しかし、私はそのタイピングをどのように指定しますか？

Answer 1

なぜ同じようhoc/EnhancedForm作成しない：

import * as React from 'react'; 

interface EnhancedProps { 
    name: string; 
} 

export default <T extends {}>(Component: React.StatelessComponent<T> | React.ComponentClass<T>): 
    React.StatelessComponent<T & EnhancedProps> => 
    (props: T & EnhancedProps) => { 
     return <Component { ...props } /> 
    } 

をそして同じように、あなたのSimpleFormにそのHOCを使用します。

const SimpleForm = props => { 

    const handleSubmit =() => { alert("Validated"); } 

    const { pristine, reset, submitting } = props 
    return (
    <form onSubmit={ handleSubmit }> 
     <div> 
     <label>First Name</label> 
     .... 
    </form> 
) 
} 

export default EnhancedForm(reduxForm({ 
    form: 'simple' // a unique identifier for this form 
})(SimpleForm)) 

そして最後に、あなたが説明するように、それを使用します。

render() { 
    return (
     <SimpleForm name="SimpleName" /> 
    ); 
    }