Vue+TypeScript定义邮箱校验规则数组报参数v隐式any错误如何解决

问题原因 #

你只给emailRules数组整体声明了any[]类型，这个声明仅表示数组可以存放任意类型的元素，并不会覆盖TypeScript对数组内函数参数的类型检查，因此函数入参v的类型没有被明确指定，才会触发隐式any报错。

解决方法 #

方案1：自定义规则类型（通用方案，不依赖组件库） #

直接明确声明校验函数的入参类型，以及数组的精确类型：

data(): {
    loading:  boolean,
    valid: boolean,
    // 声明数组元素为：接收可选字符串参数，返回布尔值或错误提示字符串的函数
    emailRules: ((v: string | undefined) => boolean | string)[],
} {  
    return {
        loading: false,
        valid: true,
        emailRules: [
            v => !!v || "Email is required",
            // 额外加非空判断，避免v为undefined时调用test方法报错
            v => !v || /.+@.+\..+/.test(v) || "Email must be valid"
        ],
    }
},

数组类型声明完成后，函数入参v的类型会自动推导，不需要单独给每个函数的参数重复标注类型。

方案2：使用组件库内置类型（适配Vuetify等UI库场景） #

如果你是用Vuetify的表单校验规则，可以直接引入官方提供的Rule类型，无需手动定义：

import type { Rule } from 'vuetify/types'

// data的返回类型里直接用内置类型即可
emailRules: Rule<string>[],

两种方案都可以完全消除隐式any的报错。

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