Exposes FormProps to Consumer When Working with TypeScript

[tugberkugurlu]

Are you submitting a bug report or a feature request?

I am not sure if this is the right repo for this but I really don't want to submit this issue to DefinetelyTyped which has gazillion of things going on.

Consider the component below which is on TypeScript:

import * as React from 'react';
import { reduxForm, Field, FormErrors, FormProps } from 'redux-form';

interface FormData {
    name?: string;
    lastname?: string;
}

const validate = (values: Readonly<FormData>): FormErrors<FormData> => { 
    const errors: FormErrors<FormData> = {};

    if(values.name === undefined) {
        errors.name = 'name needed';
    }

    if(values.lastname === undefined) {
        errors.lastname = 'lastname needed';
    }

    return errors;
};

interface SelectionWithFormProps {
    readonly value: string;
    readonly onChange: (val: React.ChangeEvent<HTMLSelectElement> | React.FormEvent<HTMLSelectElement> | string) => void;
}

class SelectionWithForm extends React.Component<FormProps<FormData, {}, {}> & SelectionWithFormProps, {}> {
    render(): JSX.Element {
        return <div>
            <div>
                <Field placeholder="First name" name="name" component="input" />
                <Field placeholder="Last name" name="lastname" component="input" />
                <div>
                    <button className="button button--primary" type="button" onClick={this.props.handleSubmit}>
                        Provide full name
                    </button>
                </div>
            </div>
        </div>;
    }
}

export default reduxForm<Readonly<FormData>, SelectionWithFormProps, {}>({
    form: 'SelectionWithForm',
    validate: validate,
    onSubmit: (values, dispatch, props) => {
        console.log('submit is being handled...');
        props.onChange(values.name + ' ' + values.lastname);
    }
})(SelectionWithForm);

What is the current behavior?

When you try to consume this, you will see that redux form properties are also available to consumer:

which I imagine does not make sense and more importantly then IntelliSense, this effects the compilation, too.

What is the expected behavior?

I would expected it to just expose SelectionWithFormProps as the shape for valid props to pass through SelectionWithForm.

Sandbox Link

You can see the sample here: https://github.com/tugberkugurlu/redux-form-typescript-repro/tree/2f1ef56d3ac6c7d2df4dcba950f871fd72d8a925 follow the readme on how to get it up and running.

You should be able to open it up on VS Code to observe the IntelliSense behavior. You can also trigger the compilation through npm run build

What's your environment?

• redux-form: 6.5.0
• @types/redux-form: 6.3.2
• typescript: 2.2.1
• Node.js: 4.4.7

[gustavohenke]

Yeah, one disadvantage of DefinitelyTyped is definitely the amount of things going on,
so nothing really stays up-to-date. 😢

It would be amazing to have it maintained on our side (see #1211), because TypeScript is the most well-adopted typing variation of JS.

Unfortunately, there's nothing we can do at the moment, as no one here is maintaining that type file.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.