“字符串”类型的参数不可分配给“${string}”类型的参数 | `${string}.${string}`

【问题标题】：Argument of type 'string' is not assignable to parameter of type '`${string}` | `${string}.${string}` | `${string}.${number}`'“字符串”类型的参数不可分配给“${string}”类型的参数 | `${string}.${string}` | `${string}.${number}`'
【发布时间】：2021-07-02 03:42:17
【问题描述】：

我已将 react-hook-forms 从 v.6 迁移到 v.7。

更改register方法后，如migration guide中指出的，出现如下错误：

“字符串”类型的参数不能分配给“${string}”类型的参数 | ${string}.${string} | ${string}.${number}'。 TS2345

非常感谢任何有类似问题或任何想法的人。提前致谢！

【问题讨论】：

我在尝试在控制器上设置动态名称时遇到了这个错误。可以在register方法中添加你正在使用的参数的代码sn-p吗？

标签： reactjs typescript react-hook-form

【解决方案1】：

register() in react-hook-form v7 不接受字符串，但 字符串 literal。文字值是表单中的字段名称之一：

interface IFormValues {
  firstName: string;
  lastName: string;
}

const { register, handleSubmit } = useForm<IFormValues>();

当您将泛型类型参数分配给 useForm 挂钩时，register 期望接收 firstName 或 lastName 文字，字符串或其他任何内容都会引发类型错误。

解决方案

根据official example，如果你使用useFieldArray并且字段是使用map动态创建的，你需要在传递给register之前将名称声明为const，这是因为类型当您将字符串文字与索引号混合时扩大：

<input key={field.id} {...register(`test.${index}.test` as const)}  />

【讨论】：

那么你如何用这样的东西制作一个字符串文字，它适用于v6：${arrayName}[${index}].fieldName？我根据迁移文档尝试了${arrayName}.${index}.fieldName，但我得到了同样的错误。
见answer。 @Kizmar
使用“as const”时会出现同样的错误。不确定我在这里缺少什么。
又快又脏，但是你会注意到当使用“testIndex”时它会抛出 TS 错误，但“otherIndex”不会。我的组件上的传入属性类型是“数字”。 codesandbox.io/s/…
@Kizmar 我知道原因。 testIndex 是一个数字，而 otherValue 是一个文字，您可以通过组合其他文字来创建文字，但您不能将文字与“通用”数字类型混合，因为它不是一个精确的值。