Vuelidate 2.x结合TypeScript使用时useVuelidate返回值类型定义问题

useVuelidate 本身支持显式传入泛型参数来指定绑定的模型类型，你可以通过以下两种方式实现精准类型标注：

方法1：调用时直接传入泛型 #

直接在调用 useVuelidate 时将你的自定义 Model 类型作为第一个泛型参数传入，即可覆盖默认的 unknown 类型：

import { useVuelidate } from '@vuelidate/core'

// 你的自定义模型类型
interface Model {
  // 此处写你的模型字段定义
  name: string
  age: number
}

const model: Model = { /* 你的模型初始化数据 */ }
const rules = { /* 你的校验规则配置 */ }

// 显式传入Model作为泛型参数
const v$ = useVuelidate<Model>(rules, model)

// 此时 v$.value.$model 会自动推导为 Model 类型，无类型报错
console.log(v$.value.$model.name) 

方法2：给返回值显式标注类型 #

如果你需要更精确控制返回值的全部类型，可以从依赖中导入 Vuelidate 类型，结合Vue的Ref标注返回值类型：

import type { Vuelidate } from '@vuelidate/core'
import { type Ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'

interface Model {
  name: string
  age: number
}

const model: Model = { /* 数据 */ }
const rules = { /* 规则 */ }

// 显式指定返回值类型
const v$: Ref<Vuelidate<Model>> = useVuelidate(rules, model)

嵌套模型拓展用法 #

如果你的模型是嵌套结构，还可以传入第二个泛型参数对应校验规则的类型，实现全链路类型校验：

interface NestedModel {
  user: {
    name: string
    phone: string
  }
  orderId: string
}

// 规则类型和模型结构对应
const rules = {
  user: {
    name: [required],
    phone: [required, mobile]
  },
  orderId: [required]
} as const

// 传入两个泛型，分别对应模型类型和规则类型
const v$ = useVuelidate<NestedModel, typeof rules>(rules, model)

以上方法生效后，不仅 v$.value.$model 会匹配你定义的Model类型，其下所有对应模型字段的校验属性类型也会自动推导匹配。

内容的提问来源于stack exchange，提问作者Michael Von Bargen