Typescript: How to constraint FieldValue type

[EtienneT]

I am designing reusable controls that encapsulate react-hook-forms controlled controls.

For example, let's say I am designing a SupplierDropdown to edit a certain property in a FieldValues object...

I want to be able to use it like so:

<SupplierDropdown<MyFieldValues> name="Supplier" />

The name property is passed to a react hook forms Controller as the name property of the Controller object. High level the reusable control SupplierDropdown is declared like this:

type Props<
    TFieldValues extends FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
    name: TName,
}

export default function SupplierDropdownControlled<
    TFieldValues extends FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>
    ({ name }: Props<TFieldValues, TName>) {

    return (<>
        <Controller<TFieldValues, TName>
            name={name}
            render={({ field, fieldState }) =>
                <Dropdown {...field} />
            } />
    </>);
}

But I would also want to constraint that the path TName points to needs to be of type SupplierDTO. Or in react hook form that FieldPathValue<TFieldValues, TName> is equal SupplierDTO. For example if TFieldValues is passed the type:

type MyFieldValues = {
    Supplier: SupplierDTO
}

I want to make sure with a typescript type constraint that the property that TName points to (in this case "Supplier") is of type SupplierDTO.

How could I do that given the fact that FieldPath can be a single string, but it can also be a hierarchical path like "Document.Invoice.Supplier".

Thank you!

[lukasvice]

Did you find a solution for this?