React中handleSubmit在JS正常但TS报隐式any类型错误的解决办法

问题原因 #

TypeScript的类型检查机制要求所有函数参数必须显式声明类型，你代码里的handleSubmit函数参数e未指定类型，触发了ts(7006)错误。普通JavaScript无类型校验，因此不会出现该问题。

解决方案 #

给事件参数指定**React.FormEvent**类型，这是React表单提交事件的标准类型：

import React from 'react';

function Form() {
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

补充说明 #

• 针对其他元素的事件（比如按钮的onClick），需对应指定类型，例如React.MouseEvent<HTMLButtonElement>，需根据元素类型匹配对应的事件类型。
• 若开启TypeScript的strict模式（推荐实践），所有隐式类型都会被严格校验，这类问题会更常见，显式声明类型是符合规范的写法。

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