SolvedDefinitelyTyped redux-form Field fails compile with type error if custom props on custom component are used

• I tried using the @types/xxxx package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @CarsonF , @aikoven , @LKay , @bancek

I'm attempting to provide a custom component as the "component" of a redux-form "Field" component.
The custom component accepts a "label" prop which the Field is meant to pass through (similar to the https://codesandbox.io/s/PNQYw1kVy example)

My application is created using create-react-app using react-scripts-ts, using the latest versions of each.

When attempting to use the field with a label prop like so (full code at the end of the issue):
<Field name="name" component={CustomInput} label="Test" />

The following TS error is returned on compile:
(24,50): error TS2339: Property 'label' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Field> & Readonly<{ children?: ReactNode; }> & Readonly<BaseFieldProps<{}>>'.
I think the problem is that BaseFieldProps is meant to pick up the type of the "component" prop, but instead is using the default {} but I have no idea how to fix this.

Possibly a similar issue to the one found in microsoft/TypeScript#15463 (which ultimately was the result of the react-redux typings)

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

type TextInputProps = {
    label: string,
    className?: string
} & WrappedFieldProps

const TextInput: React.StatelessComponent<TextInputProps> = ({ className, input, label, meta: { touched, error, warning }, ...otherProps }) => {
    return (
        <label className={className} {...otherProps}>
            {label}
            <input {...input} placeholder={label} type="text" />
            {touched && ((error && <div>{error}</div>) || (warning && <div>{warning}</div>))}
        </label>
    )
}

type FormProps = {
    className?: string,
} & InjectedFormProps
const PlainForm: React.StatelessComponent<FormProps> = ({ handleSubmit, className, pristine, submitting, reset }) => (
    <form className={className} onSubmit={handleSubmit}>
        <Field name="name" component={TextInput} label="Test" />
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Reset</button>
    </form>
)

export const ContactForm = reduxForm({
    form: 'itsAForm'
})(PlainForm)

@LKay this typecast is almost alien:

const FieldCustom = Field as new () => GenericField<MyFieldCustomProps>;

I doubt anybody installing this typings will be able to use it without having to manually dig the test files. as for a constructive criticism, make a PR with a README.md to explain how to use it after those wild changes. the plus side of using typings is that you can just use them, and learn as you type, not having to rely on typecasting stuff nor reading the typings itself

You're not making a generic, you're casting the existing Field to a more specific type so that Typescript understands what the props are (because type inference fails). It's annoying and not a pleasant way to work with the redux-form framework, but it's functional. I'm hoping that at some stage there will be a solution so we don't need to deal with that, but as I am not in a position to propose said solution I've accepted it for now.

One thing I will mention is that if you're willing to give up type safety, you can probably do the following in a module.

// untyped-field.ts
import {Field, GenericField} from "redux-form"
const UntypedField = Field as new () => GenericField<any>;
export {UntypedField as Field}

now if you import Field from untyped-field.ts instead of redux-form you'll be able to use whatever props you like, but your compiler/tooling won't tell you if you pass garbage in.

This isn't a proper solution, but it does allow you to use Typescript in the rest of your application without having to fight with/work around type inference with redux-form.

It would be very helpful if a set of good examples would be provided!

Since it both is an important deviation from official documentation, and it includes some pretty confusing syntax hidden in the test files.

I still haven't figured out how to this :-)

the provided tests have no mention of "label" props, and this is clearly a regression on the typings (and broke my entire project). it should at least have tests that mirror the official redux-form docs from http://redux-form.com/7.0.1/examples/syncValidation/, like so:

const SyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field name="email" type="email" component={renderField} label="Email" />
      <Field name="age" type="number" component={renderField} label="Age" />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

the current tests cover almost no code from the official documentation, and will make it hard for newcomers to use it. there are an unnecessary amount of typecasting and manual setting of props that needs to be done when using this types, when some common documented props should come by default (just like label prop)

@rezanouri87 I know you can do that, but shouldn't be necessary. the types should have the common props (in BaseFieldProps or CommonFieldProps) that are already documented in the official docs, that's my point