Vue.js表单提交时event参数报ts(7006)隐式any类型错误如何解决

该报错是TypeScript开启noImplicitAny校验规则后触发的7006号错误，你未给handleFormSubmit函数的event参数声明明确类型，TypeScript无法自动推导类型时就会判定该参数为隐式any类型，抛出错误。

以下方案完全适配Vue.js + TypeScript的开发场景，无需额外依赖：

• 标准类型声明方案（推荐）
  给event明确指定为表单提交事件的原生类型SubmitEvent，同时由于event.target默认是通用的EventTarget类型，不存在表单专属的elements属性，需要将其断言为HTMLFormElement类型即可正常访问表单字段，修改后代码如下：

const handleFormSubmit = (event: SubmitEvent) => {
    event.preventDefault();

    const form = event.target as HTMLFormElement;
    const email = form.elements.email?.value;
    const password = form.elements.password?.value;

    console.log(email, password);
};

• 更严谨的类型校验方案
  如果TypeScript无法识别elements下的email、password字段，可以通过namedItem匹配表单字段并断言为对应输入框类型，避免类型报错：

const handleFormSubmit = (event: SubmitEvent) => {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const email = (form.elements.namedItem('email') as HTMLInputElement | null)?.value;
    const password = (form.elements.namedItem('password') as HTMLInputElement | null)?.value;
    console.log(email, password);
};

• 临时绕开方案（不推荐）
  如果仅需要临时调试绕过校验，可以直接给event指定any类型，但是会丢失所有类型校验能力，不建议正式环境使用：

// 不推荐写法
const handleFormSubmit = (event: any) => {
    event.preventDefault();
    // 其余逻辑不变
};

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