Was looking for years, didn't find anything worthy tho.

When I was working with flow, I could simply:

import { type FieldProps, FormProps } from 'redux-form';

Is there a similar (and that easy) way to properly set props to redux form in typescript?

Docs aren't saying anything about typescript, there's only a page for Flow typings.

However, I found that I can import something like propTypes from redux-form:

import { reduxForm, propTypes } from 'redux-form'

However - redux-form has nothing like propTypes exported, so docs are kinda deprecated.

Link: .2.1/docs/api/props.md/

Thanks in advance for any kind of help.

tl;dr class RegistrationForm extends React.PureComponent<any> {
                                      what to drop here ^^^^^                                            

Was looking for years, didn't find anything worthy tho.

When I was working with flow, I could simply:

import { type FieldProps, FormProps } from 'redux-form';

Is there a similar (and that easy) way to properly set props to redux form in typescript?

Docs aren't saying anything about typescript, there's only a page for Flow typings.

However, I found that I can import something like propTypes from redux-form:

import { reduxForm, propTypes } from 'redux-form'

However - redux-form has nothing like propTypes exported, so docs are kinda deprecated.

Link: https://redux-form.com/7.2.1/docs/api/props.md/

Thanks in advance for any kind of help.

tl;dr class RegistrationForm extends React.PureComponent<any> {
                                      what to drop here ^^^^^                                            

• javascript
• reactjs
• typescript
• redux-form
• definitelytyped

• Have you tried import {FieldProps, FormProps} from 'redux-form';? In TypeScript you do not indicate that you are importing a type with a special keyword, you just import the type. – Aluan Haddad Commented Jan 22, 2018 at 10:43
• @AluanHaddad Yes, I tried. redux-form has nothing like FieldProps or FormProps exported :( – Patrickkx Commented Jan 22, 2018 at 10:45
• 1 You need to install the @types/redux-form package with your package manager. – Aluan Haddad Commented Jan 22, 2018 at 10:46
• @AluanHaddad Included <FormProps<any, any>> but it still doesn't work properly. It says that e.g. handleSubmit function was not found in props, even, if it is there. – Patrickkx Commented Jan 22, 2018 at 11:05
• 1 See InjectedFormProps<FormData = {}, P = {}> in reduxForm.d.ts. Note that default values of the type parameters make specifying them optional. – Aluan Haddad Commented Jan 22, 2018 at 11:08

1 Answer 1

You need to install the @types/redux-form package with your package manager. The @types/redux-form package includes types definitions for redux-form package.

Then you can import type definitions from redux-form, for example InjectedFormProps.

Your form that will be wrapped with reduxForm() should has props that extends InjectedFormProps<FormData = {}, P = {}>.

reduxForm() type is generic reduxForm<FormData = {}, P = {}>(...

See the example:

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

import { IUser } from './index';

interface IProps {
  message: string;
}

class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> {
  render() {
    const { pristine, submitting, reset, handleSubmit, message } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>{message}</div>
        <div>
          <label>First Name </label>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
        <div>
          <label>Last Name </label>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>
            Submit
          </button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>
            Clear Values
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm<IUser, IProps>({
  form: 'userForm',
})(UserForm);

The source code of @types/redux-form package is located here. You can see the types there and more complicated examples in the redux-form-tests.tsx file that is used for types checking.