With the compiler option exactOptionalPropertyTypes is set to true (e.g. when using @tsconfig/strictest base config), the type of getInputProps can't be inferred correctly.
Checkbox.tsx:21:49 - error TS2345: Argument of type '{ type: string; value: string | undefined; }' is not assignable to parameter of type 'Omit<MinimalInputProps, HandledProps | Callbacks> & Partial<Pick<MinimalInputProps, Callbacks>>'.
Object literal may only specify known properties, and 'value' does not exist in type 'Omit<MinimalInputProps, HandledProps | Callbacks> & Partial<Pick<MinimalInputProps, Callbacks>>'.
21 {...getInputProps({ type: "checkbox", value })}
~~~~~
Found 1 error in Checkbox.tsx:21
The generic type argument for getInputProps is inferred as MinimalInputProps, because the actual props of the input element don't extend that type. Explicitly providing the type argument makes that clear:
Checkbox.tsx:21:29 - error TS2344: Type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' does not satisfy the constraint 'MinimalInputProps'.
Types of property 'onChange' are incompatible.
Type 'ChangeEventHandler<HTMLInputElement> | undefined' is not assignable to type '(...args: any[]) => void'.
Type 'undefined' is not assignable to type '(...args: any[]) => void'.
21 {...getInputProps<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>({ type: "checkbox", value })}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error in Checkbox.tsx:21
Adding an explicit | undefined to all the prop types in MinimalInputProps (to match the definition in @types/react) fixes the issue.
With the compiler option
exactOptionalPropertyTypes
is set totrue
(e.g. when using @tsconfig/strictest base config), the type ofgetInputProps
can't be inferred correctly.For example, using the
Checkbox
component from the docs app:The generic type argument for
getInputProps
is inferred asMinimalInputProps
, because the actual props of theinput
element don't extend that type. Explicitly providing the type argument makes that clear:Adding an explicit
| undefined
to all the prop types inMinimalInputProps
(to match the definition in @types/react) fixes the issue.