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>
);
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";