Typescript Problems

[thejozika]

With the following code i get the following typescript error for name.
But it should work because a Record should be contained?

TS2345: Argument of type Key is not assignable to parameter of type Path
Type string is not assignable to type Path

The error suggests, that key is just treated as a string...

import {UseFormRegisterReturn, UseFormSetValue } from "react-hook-form";


interface Props<Key extends string , Val, F extends Record<Key, Val[]>>{
    value:Val[]
    register:UseFormRegisterReturn<Key>
    setValue:UseFormSetValue<F>
}

const Input = <Key extends string, Val, F extends Record<Key, Val[]>>(
    {register,setValue,value}:Props<Key, Val,F>) => {
    const {name } = register
    setValue(name, value)
    return <div>empty</div>
}


export default Input

[sujinleeme]

If you use useFormContext, you can avoid prop drilling.

You can use UseFormReturn<FormValues> type consistently to avoid type confliction and decorations.

[Playground]

import { UseFormReturn, useForm } from 'react-hook-form';

type FormValues = {
  member: string;
  group: string;
};

type Form = UseFormReturn<FormValues>;

interface Props<FieldName extends keyof FormValues> {
  register: Form['register'];
  setValue: Form['setValue'];
  fieldName: FieldName;
  value: FormValues[FieldName];
}

const Input = <FieldName extends keyof FormValues>({
  setValue,
}: Props<FieldName>) => {
  return <div>empty</div>;
};

const { setValue, register } = useForm<FormValues>();

const MemberInput = (
  <Input<'member'>
    register={register}
    fieldName='member'
    value='Sugar'
    setValue={setValue}
  />
);

const GroupInput = (
  <Input<'group'>
    register={register}
    fieldName='group'
    value='BTS'
    setValue={setValue}
  />
);


const BadInputExample1 = (
  <Input<'no-key'> // Type error: the fieldName is not existed
    register={register}
    fieldName='group'
    value='BTS'
    setValue={setValue}
  />
);

const BadInputExample2 = (
  <Input<'group'>
    register={register}
    fieldName='group'
    value={3} // Type error: The value is not string
    setValue={setValue}
  />
);