Is there a way to limit `TFieldName` to specific field types when using `react-hook-form`?

Question

Is there a way to limit `TFieldName` to specific field types when using `react-hook-form`?

I am working with a react-hook-form component:

interface FormFieldInputLabelProps<
  TFieldValues extends FieldValues = FieldValues,
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> {
  control: Control<TFieldValues>;
  name: TFieldName;
}

export function FormFieldInputLabel<
  TFieldValues extends FieldValues = FieldValues,
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({ name, control }: FormFieldInputLabelProps<TFieldValues, TFieldName>) {
  const { label } = useFieldContext();
  const { field } = useController({
    control,
    name,
    defaultValue: label
  });

  return <input type="hidden" {...field} />;
};

Although it functions correctly, I encountered an issue when trying to assign the label (a string) as the defaultValue of the field. The error message displayed is:

Type 'string' is not assignable to type 'UnpackNestedValue<PathValue<TFieldValues, TFieldName>>'.ts(2322)

It seems that there may be uncertainty regarding whether

UnpackNestedValue<PathValue<TFieldValues, TFieldName>>

will always be a string... Is there a way to ensure that the provided name indeed corresponds to a value of type string?

Access the codesandbox demonstrating the warning and intended usage here:

https://codesandbox.io/s/condescending-kare-38kdzm?file=/src/App.tsx

typescript react-hook-form

Answer 1

Answer №1

Initially, my understanding mirrored yours—field values can be of type any, leading to the possibility of keys having diverse types. This means that a TFieldName should encompass all possible string values for path keys.

While it is theoretically feasible to recursively filter properties of a specific type and paths within that type, I have not been able to accomplish this in your scenario. Thus, I suspect the issue may not lie in coercing any values into strings.

One potential explanation could be that the TFieldName might actually be empty, resulting in a legal union type of never | undefined which are not strings.

export declare type UseControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
    name: TName;
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
    shouldUnregister?: boolean;
    defaultValue?: FieldPathValue<TFieldValues, TName>;
    control?: Control<TFieldValues>;
};

Hence, unless you provide a minimum, non-empty FieldValues, you may need to adjust the typing as follows:

  const { field } = useController({
    control,
    name,
    defaultValue: label as FieldPathValue<TFieldValues, TFieldName>
  });

[Edit]

When the type is known, TypeScript can infer the resulting type accurately: For example:

const variable = PathValue<FieldValues, FieldPath<FieldValues>>

, where variable is inferred as any due to the known type. But with templates like TFieldValue, TypeScript struggles to predict valid values, resulting in unresolved types within the template.

[Edit 2] Here is a simple example illustrating TS "limitation"

Answer 2

Initially, my understanding mirrored yours—field values can be of type any, leading to the possibility of keys having diverse types. This means that a TFieldName should encompass all possible string values for path keys.

While it is theoretically feasible to recursively filter properties of a specific type and paths within that type, I have not been able to accomplish this in your scenario. Thus, I suspect the issue may not lie in coercing any values into strings.

One potential explanation could be that the TFieldName might actually be empty, resulting in a legal union type of never | undefined which are not strings.

export declare type UseControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
    name: TName;
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
    shouldUnregister?: boolean;
    defaultValue?: FieldPathValue<TFieldValues, TName>;
    control?: Control<TFieldValues>;
};

Hence, unless you provide a minimum, non-empty FieldValues, you may need to adjust the typing as follows:

  const { field } = useController({
    control,
    name,
    defaultValue: label as FieldPathValue<TFieldValues, TFieldName>
  });

[Edit]

When the type is known, TypeScript can infer the resulting type accurately: For example:

const variable = PathValue<FieldValues, FieldPath<FieldValues>>

, where variable is inferred as any due to the known type. But with templates like TFieldValue, TypeScript struggles to predict valid values, resulting in unresolved types within the template.

[Edit 2] Here is a simple example illustrating TS "limitation"

Is there a way to limit `TFieldName` to specific field types when using `react-hook-form`?

Answer №1

Similar questions

Is there a way to modify component data in Angular 5 from another component?

Best practices for updating the DOM in Angular 7 without needing access to the original source code

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Change the Angular Material 2 theme from light to dark with a simple click

It appears that you are currently utilizing legacy implementation in your code. To ensure optimal performance, we recommend updating your code by incorporating createWrapper() and wrapper.useWrappedStore()

When attempting to create a fresh NestJS module, a message pops up stating: "An error occurred while

Learning to implement forwardRef in MenuItem from Material-UI

Implementing SSL CA Bundle in NodeJS 14

Creating a custom class to extend the Express.Session interface in TypeScript

Is time-based revalidation in NextJS factored into Vercel's build execution time?

When incorporating Typescript into HTML, the text does not appear in bold as expected

"Although a generic type is compatible with a function argument for mapping, it may not work with

Creating a typescript object shape without an index signature involves specifying the exact properties

Tips for preserving data upon page refresh in angular 2/4

Storing a variety of values within a formControl in Angular

Tips for integrating TypeScript files into Next.js HTML files

Is it possible to access NgbdModalContent properties from a different component?

Issue with RxDB: Collection not found upon reload

Swap the value of a button's text using a dropdown list when clicked in VueJS with TypeScript