Typescript: How can I use a generic type extending an interface

[avaltat]

I would like to know how I can use a generic type extending an interface. Here is a link to a code sandbox describing the issue. https://codesandbox.io/s/react-hook-form-typing-sn11sj?file=/src/App.tsx

As you can see I have the following typescript issue

Argument of type '"key"' is not assignable to parameter of type 'Path<FormValues>'

But FormValues extends BaseFormValues which specifies that key exists. I first looked at #4426, but If I use

import {UseFormRegister, FieldValues } from 'react-hook-form'
register: UseFormRegister<FieldValues>

This will not force the parent use a type extending BaseFormValues. And I don't want to use a controller here. I think key should be included in Path<FormValues> in my example.

Any help on this would be very nice 😊 .

Thank you in advance.

[Moshyfawn]

The register method was not designed to be passed as a component prop but rather to return the field handlers

[datner]

Ok, so what is the correct way to implement a same-spirit solution?

[CalMlynarczyk]

Are we sure about this? There are code examples in the docs showing register and other useForm return values getting passed around to child components.

[CalMlynarczyk]

I've forked the original CodeSandbox from @avaltat to demonstrate the same type issue he is experiencing without passing the useForm return values as props to other components.

At first glance, this would appear to be an issue with the TypeScript compiler not handling generic type constraints correctly when evaluating keys on a type. However, it's possible that the Path or PathImpl types have some subtle bug that causing this unexpected type check error. I don't see anything glaringly wrong with the implementation, but that's probably where we should look for a solution.

[avaltat]

Thank you @Moshyfawn. But I have the same problem with setValue (I updated the codesandbox ). Is there a wayto use a type extending a given interface ?

[juliomrc]

Hey @avaltat did you come up with a good solution? I am, of course, facing a similar issue :)

[DiFuks]

Still have problem :( https://codesandbox.io/s/react-hook-form-control-forked-w39qfq?file=/src/App.tsx

[datner]

https://codesandbox.io/s/react-hook-form-control-forked-jpnltk
You're welcome

[DiFuks]

Unfortunately, this solution is of very little help. First, I can now pass any value to name. Second, useWatch's return value typing doesn't become more precise. https://codesandbox.io/s/react-hook-form-control-forked-l39vhg?file=/src/App.tsx

[datner]

The requirements presented are "I want a one-off generic component that you can't configure and works only for a specific shape but can accept any type", something has got to give. You will have to do one of the following:

1. give a concrete type to the function control: Control<ContainedForm>
2. cast things to hold typescripts hands
3. hoist the concern to the consumer, where a concrete type can be inferred by usage, by exposing name, you can then do some type arithmetic to gate the name to only keys that point only to the correct type you're looking for.
4. Write a RFC to the typescript repository to allow this sort of generic arguments