The issue of: Type 'string' is not assignable to type '`${string}` | `${string}.${string}` | `${string}.${number}`'.

Describe the bug We followed the v6 to v7 migration docs and are still running into this error in several areas where we’re using react-hook-form.

We have generic components in custom libraries that have typed props like fieldName: string or arrayIndex: number. In v7, use of variables like these result in the TS error: Type 'string' is not assignable to type '${string} | ${string}.${string} | ${string}.${number}'.. Using as const doesn’t make the TS error go away. Changing the prop type to any doesn’t fix it either.

We get the error when trying to use setError() with a field name parameter as mentioned. We also get this error when trying to set dynamic field names using useFieldArray() (for example) with a typed index parameter. So something like arrayName.${index}.${fieldName} on a Controller name property or input register name. Again, neither can be fixed in my cause by using as const.

See also: https://stackoverflow.com/questions/66967241/argument-of-type-string-is-not-assignable-to-parameter-of-type-string

Maybe (hopefully) I’m missing something simple here?

To Reproduce Steps to reproduce the behavior: see Codesandbox

Codesandbox link (Required) In the linked CodeSandbox, you’ll see the typed variable causes the TS error. The literal parameter does not. I don’t have the option to use a literal (non-typed) parameter because it’s a typed prop provided to the component. [Edit] Added setError examples as well. https://codesandbox.io/s/sleepy-voice-30pym?fontsize=14&hidenavigation=1&theme=dark

Expected behavior No TypeScript error.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, but not applicable

Additional context react: 17.0.2 react-hook-form: 7.0.7

[bluebill1049]

I think you are after this gets merged in TS: https://github.com/microsoft/TypeScript/pull/43361

[kg-currenxie]

Seems to work fine here. TypeScript 4.1.2

import { FC } from 'react'
import { Controller, useFormContext } from 'react-hook-form'

import { TextInput } from '../../atoms/TextInput'
import { FieldTemplate } from '../../templates/FieldTemplate'

interface ITextInputField {
  defaultValue?: string | null
  isLocked?: boolean
  label?: string
  name: string
  placeholder?: string
  required?: boolean
}

export const TextInputField: FC<ITextInputField> = ({
  name,
  defaultValue,
  validations,
  required,
  placeholder,
  label,
  isLocked,
}) => {
  const { register, control } = useFormContext()
  const ref = register(`${name}` as const)

  return (
    <FieldTemplate name={name} label={label}>
      <Controller
        name={`${name}` as const}
        control={control}
        render={({ field }) => {
          return (
            <TextInput
              name={name}
              defaultValue={defaultValue ?? undefined}
              innerRef={ref}
              placeholder={placeholder}
              isClearable={!!field.value}
              onChange={field.onChange}
              isLocked={isLocked}
              onClear={() => {
                return field.onChange(undefined)
              }}
            />
          )
        }}
      />
    </FieldTemplate>
  )
}

Its just a wrapper component where i pass the name down, as a string