Definitelytyped: Redux-Form <Field> with a custom component TS 3.2

[virzak]

• Authors: @Kovensky @carsonf @aikoven @LKay @bancek @Aleksion @weswigham

Seems like none of the test cases has a <Field> with a custom component, even though it is everywhere in the examples (here). It also fails when switching to TS 3.2, but works with TS 3.1

Is it a must to use <FieldCustom> as per the test?

If so why wasn't this a problem before 3.2?

[LKay]

TS is not able to resolve the correct outer type for a field when a custom component (at least as of <3.1) on its own and thus the type overload using: const FieldCustom = Field as new () => GenericField<MyFieldCustomProps>; as defined in the tests. Not sure if something has changed in the latest version of TS (which seems unlikely, afaik). I would need to investigate myself why it's not working in TS3.2 as it was before.

[virzak]

@LKay const FieldCustom = Field as new () => GenericField<MyFieldCustomProps>; works perfectly fine with TS 3.2, but <Field> doesn't. <Field> was working fine with TS 3.1 without any overloads for me. If you're saying that overload should be used regardless, perhaps this is not an issue at all. However, usually, when converting from JS to TS, the same tags can be used.

[sargant]

I'm also getting type failures using @types/[email protected] and [email protected] when trying to use a custom component with a <Field>, which where not failures using [email protected].

Minimal code that fails:

import { FC } from 'react'
import { Field } from 'redux-form'
const MyInput: FC = () => <input type='text' />
const MyForm: FC = () => <Field name='foo' component={MyInput} />

[Razinsky]

Same thing here, on [email protected]

Type 'typeof 'CustomTextField' is not assignable to type '"input"'.

For now I can silence it by doing that but that's bad :)

<Field<{}> component={CustomTextField} name="textfield" />

[virzak]

@Razinsky <Field<{}> doesn't work either

[jimjeffers]

I am having the same problem. Will stay tuned to see what the solution ends up being. For now I am casting as any during assignment which is not ideal...

<Field name="fullName" component={Form.Input as any} type="text" />

[weswigham]

Has anyone considered redefining Field as
export class Field<P extends GenericFieldHTMLAttributes | BaseFieldProps = GenericFieldHTMLAttributes | BaseFieldProps> extends Component<P> { ... }

instead of the export class Field<P = GenericFieldHTMLAttributes | BaseFieldProps> extends Component<BaseFieldProps<P> & P> it is today? The unconstrained P is strange (since it has to allow some props in the end), the the inferences we make in this formulation all end up being secondary (and it seems to be one of those secondary inferences that causes the issue).

[breeeew]

Has anyone considered redefining Field

yes, that seems works

[sargant]

Fixed in #32854 @virzak

[virzak]

Thanks a bunch!