`react-hook-form` component typings seem to be incorrect
See original GitHub issueThe default import from 'react-phone-number-input/react-hook-form'
has type any
.
I assume this is because the type
type PhoneInputWithCountrySelectType<InputComponentProps = DefaultInputComponentProps, FormValues> = React.ComponentClass<Props<InputComponentProps, FormValues>, State<Props<InputComponentProps, FormValues>>>
is incorrect.
First of all, the type parameter FormValues
follows an optional type parameter, which is not allowed in TypeScript.
In addition to that, FormValues
is a required parameter, but the component type uses PhoneInputWithCountrySelectType
without any parameters.
declare const PhoneInputWithCountrySelect: PhoneInputWithCountrySelectType;
As a result, it seems that TS cannot parse that and assigns any
as the type.
As a workaround, I have swapped the parameters and assigned {}
to FormValues
, as I have no idea what it’s supposed to be, and it works.
Issue Analytics
- State:
- Created a year ago
- Comments:27 (17 by maintainers)
Top Results From Across the Web
[Bug]: TypeScript errors type incorrect if value is an Object #6523
Steps to reproduce Make a form whose type includes a value of type Big , see that the errors field types it as...
Read more >Advanced Usage - React Hook Form
This idea here is that you can easily compose your form with inputs. We are going to create a Form component to automatically...
Read more >Chakra UI + React Hook Form error wrong Types
I had the exact same type issue. I solved this with : <FormErrorMessage> {errors.title && errors.title.message?
Read more >Understanding common frustrations with React Hooks
React Hooks can be frustrating despite their popularity and widespread use. Learn about some of the drawbacks to using React Hooks.
Read more >How to create reusable form components with React Hook ...
Next, we need to register our input with react-hook-form. Errors and rules won't work until we do this. It may seem like our...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@catamphetamine Actually, I just found out that there’s a new TS feature that allows you to fix a generic function’s type. So you can just write
typeof PhoneInput<CustomProps, CustomFormValues>
now.In that case, we don’t need the export. Just move the generic to the right and it should all work great.
@catamphetamine It can be, it’s just that giving a type for the user’s wrapper component is not something you need to do. In my code base, most components are typed as
FC<Props, Something>
. Obviously I wouldn’t want a library trying to make me use something else. Especially since in my caseFC
is a custom type as well, so you can’t use it like that.So, I don’t need a
PhoneInputComponentType
for my wrapper component, I just need aPhoneInputType
to represent your component in case I need it.