React Hook Form 的高级类型

react-hook-form 库中有两个重要的类型：FieldPath 和 FieldPathValue。这两个类型用来描述表单中的字段路径和字段对应值的类型，它们可以帮助我们更规范的编写 react-hook-form 的代码。i18n 用的是和 FieldPath 相似的构造方法。

什么是 FieldPath？

FieldPath 是一个泛型类型，它接受一个 TFieldValues 类型作为参数，表示对象中所有字段的路径。FieldPath 的返回值是一个联合类型，表示表单中某个字段或者嵌套字段的路径，用点号分隔。例如，如果我们有一个表单数据对象如下：

type FormValues = { 
    name: string; 
    address: { 
        city: string; 
        country: string; 
    } 
    tuple: [number,string] 
    array: string[] 
} 

那么，FieldPath 的可能值有：

• "name"
• "address"
• "tuple"
• "array"
• "address.city"
• "address.country"
• "tuple.0"
• "tuple.1"
• `array.${number}`

这些值就可以作为 react-hook-form 中一些 hook 和方法的参数，比如 useController、useWatch、setValue、getError 等。这样可以让我们更灵活地操作表单中的不同字段。

FieldPath 的构造过程

什么是 FieldPathValue？

FieldPathValue 也是一个泛型类型，它接受两个参数：TFieldValues 和 TFieldPath。TFieldValues 表示表单中所有字段的值的类型，TFieldPath 表示某个字段或者嵌套字段的路径。FieldPathValue 的返回值是一个联合类型，表示 TFieldPath 对应的字段的值的类型。例如，如果我们还是使用上面的 FormValues 类型，那么：

• FieldPathValue<FormValues, “name”> 的返回值是 string
• FieldPathValue<FormValues, “address”> 的返回值是 { city: string; country: string; }
• FieldPathValue<FormValues, “address.city”> 的返回值是 string
• FieldPathValue<FormValues, “tuple.0”> 的返回值是 number
• FieldPathValue<FormValues, “array”> 的返回值是 string[]

这些值就可以作为 react-hook-form 中一些 hook 和方法的泛型参数，比如 useForm、useFormContext、useFormState 等等。这样可以让我们更准确地获取和设置表单中不同字段的值。

FieldPathValue的构造过程

总结

TypeScript 的一大优点是支持一些高级的类型系统特性，这些特性可以让我们用更有表达力和灵活性的方式来定义和使用类型。 例如，我们可以使用条件类型来根据某些条件创建不同的类型，使用映射类型来根据已有的类型生成新的类型，使用泛型类型来抽象出通用的模式，以及使用类型变量来捕获动态的类型信息。 这些技术不仅可以帮助我们更好地控制和约束我们的代码，还可以让我们利用 TypeScript 的强大的类型推断能力，从而减少重复和冗余的代码。

参考：react-hook-form