Search code examples
typescriptredux-form

Why are many of the interfaces in the redux-form typings not exported?

I want to make some custom input fields for redux-form.

So I started off by looking at the Material UI example in the documentation.

const renderTextField = ({input, label, meta: { touched, error }, ...custom }) =>
    <TextField
        hintText={label}
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        {...custom}
    />

That looks straight forward, so I checked out the definitely typed type definitions for redux-form and found the interfaces defining what I wanted.

interface WrappedFieldProps {
    input: WrappedFieldInputProps;
    meta: WrappedFieldMetaProps;
}

But they're not exported?

So how do I apply the interface to a renderField function, if I can't access the interface?

Am I missing something obvious, or taking the wrong approach?

I don't think the official documentation is wrong, so are the type definitions wrong in not exporting?

One way around this is to have the render function take props:any, but that will render the type definitions useless!

const renderTextField = (props:any) => {
    const {input, label, meta: { touched, error }, ...custom } = props;

    return (
        <TextField
            hintText={label}
            floatingLabelText={label}
            errorText={touched && error}
            {...input}
            {...custom}
        />
    );
}

So not only can I not use the interfaces in my own code, but they wouldn't be used when passing the function to <Field component={renderTextField} />.

Solution

  • I discovered that it is in fact possible to import the interfaces, even though they aren't being exported!

    I was using import * as ReduxForm from "redux-form"; which imported the module under the name ReduxForm.

    Looking at what was available on ReduxForm showed only the exported parts of the module.

    However if I use an import that explicitly asks for the non-exported interface import { WrappedFieldProps } from "redux-form"; then it works, and I can use that interface!

    This has confused me a bit, it runs against my understanding how of import/export and modules work. But I'm glad I have a solution.

    I now need to go and read up on Typescript imports to figure out if this is a feature, or a bug. (I assume it's a feature).