Typescript: passing a typed field array field name to a sub component

[fkaempfer]

I'm trying to write a reusable component that I want to point to a array-valued property with a certain type via a control and name prop. If I use FieldPathByValue this can't be used in the name property:

type MyType = {
  prop: string
}
interface TestCompProps<Parent extends FieldValues> {
  control: Control<Parent>
  name: FieldPathByValue<Parent, MyType[]>
}

function TestComp<P extends FieldValues>({name,control}: TestCompProps<P>){
  let items = useFieldArray({
    control,
    name,
    keyName: 'key',
  });

}

By creating a custom FieldArrayPathByValue there is no error (it's basically FieldPathByValue, but Path replaced with ArrayPath):

export type FieldArrayPathByValue<TFieldValues extends FieldValues, TValue> = {
  [Key in ArrayPath<TFieldValues>]: FieldArrayPathValue<TFieldValues, Key> extends TValue ? Key : never;
}[FieldArrayPath<TFieldValues>];

It gets rid of the error, but code typescript is still unable to determine the types of the form fields:

console.log(items.fields[0].prop) // error

So how would I be able to give a type to the field array property? Is there any way to do that?

See: https://codesandbox.io/s/friendly-pond-pe07c8?file=/src/App.tsx

[AlisCode]

Also running into this. I think it has to do with the fact that your generic P inside TestComp does not know that the path represented by FieldPathByValue (or your alias FieldArrayPathByValue) points to a MyType[].

I've been trying many ideas but to no avail ...
Anybody knows a good solution ?

[aspirisen]

Hi, I created a PR that demonstrates a Lens approach for building reusable components with TypeScript support #12284