react-hook-form中如何通过TS接口校验Yup schema类型一致性？

问题根源 #

当前写法无法触发TS类型报错的核心原因有两个：

• 给yupResolver手动传入了Yup.AnyObjectSchema这个极宽泛的类型，直接抹掉了validationSchema的具体结构类型，TS不会再校验schema和表单类型的匹配关系
• 调用Yup.object().shape()时没有绑定预先定义的IYup接口做约束，Yup只会根据传入的校验规则自动推导输出类型，不会主动和接口定义做比对，规则写错时无法触发TS提示

正确配置步骤 #

• 调用Yup.object()时直接传入接口泛型，强制要求后续shape内的所有校验规则最终推导的类型，必须和接口定义完全匹配
• 去掉yupResolver后手动写的<Yup.AnyObjectSchema>泛型参数，让TS自动推导传入schema的实际类型，不要手动把类型拓宽成任意结构
• 数组类型的校验规则不要用无泛型的Yup.array()，要通过.of()明确数组元素类型，和接口里的数组定义对应
• 如果字段是必填项，补上.required()，避免TS把字段推导成可选类型，和接口定义不一致

正确代码示例 #

interface IYup {
  num: number[],
  str: string
}

// 绑定IYup泛型，强制shape规则匹配接口
const validationSchema = Yup.object<IYup>().shape({
  num: Yup.array().of(Yup.number()).required(), // 明确数组元素为number，匹配number[]类型
  str: Yup.string().required()
})

// 移除yupResolver上的宽泛类型声明，使用自动推导的类型
const methods = useForm<IYup>({
  resolver: yupResolver(validationSchema)
});
const {register, handleSubmit} = methods;

配置完成后，如果误把str的规则写成Yup.number()，TS会直接在对应代码行抛出类型不匹配的错误，和预期提示效果一致，不需要运行代码就能提前发现校验规则写错的问题。

内容的提问来源于stack exchange，提问作者chloepark