Search code examples
redux-formdefinitelytyped

Using Redux-Form in Typescript I would like to use the WrappedFieldProps<S> interface but it isn't exported. Am I doing it wrong?


I'm using Redux-Form and using <Field> components that are rendered using functions (as in the sync validation example on the Redux-Form site: http://redux-form.com/6.0.0-rc.1/examples/syncValidation/).

As I'm using Typescript I'd like to give the renderField function's parameter a type. The type of the parameter appears to be based on the interface WrappedFieldProps<S> however that interface isn't exported so I can't use it.

So am I right to want to use WrappedFieldProps< S>, or is there a better way?

Example code:

interface RenderFieldProps extends WrappedFieldProps<AppState> {
    placeholder: string,
    type: string,
};

public render(): JSX.Element {
    return (
        <form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
            <Field name="email" component={this.renderField} type="text" placeholder="Add your email address"/>
            <button type="submit">Submit form</button>
        </form>
    );
}

private renderField = (props: RenderFieldProps) => (
    <div>
        <input {...props.input} placeholder={props.placeholder} type={props.type}/>
    </div>
);

Solution

  • I am not sure where did you get your type definition, but if you check the index.d.ts in this repository, you will see that WrappedFieldProps is exported in this line:

    export * from "./lib/Field";
    

    So, basically you can import it using:

    import {WrappedFieldProps } from "redux-form";