React Typescript TS7006错误：事件参数e隐式为any类型如何修复？

报错原因 #

TS7006错误是因为TypeScript无法自动推断onChange触发的事件参数e的类型，默认分配了any类型，触发了类型校验规则。

修复步骤 #

1. 从react包中引入输入框change事件对应的类型ChangeEvent：

// 修改前
import { useState } from 'react';
// 修改后
import { useState, type ChangeEvent } from 'react';

2. 给handleChangeNumber的参数e标注正确的事件类型：

// 修改前
const handleChangeNumber = (e) => {
// 修改后
const handleChangeNumber = (e: ChangeEvent<HTMLInputElement>) => {
  setInputNumber(+e.target.value)
}

补充说明 #

ChangeEvent是React封装的change事件通用类型，尖括号里的HTMLInputElement指定了事件触发的目标元素是输入框，和你绑定事件的<input type="number">元素对应，这样TypeScript就能正确识别e.target.value的类型，不会再报错。

如果后续遇到其他事件的类型定义问题，可以直接把回调函数内联写在事件属性上，把鼠标悬停在参数e上，TypeScript会自动显示对应的类型定义，直接复制使用即可。

修复后完整代码 #

import "./App.css";
import { useState, type ChangeEvent } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators, State } from "./state";

function App() {
  const [inputNumber, setInputNumber] = useState(0);
  const dispatch = useDispatch();

  const { depositMoney, withdrawMoney, bankrupt } = bindActionCreators(
    actionCreators,
    dispatch
  );
  const amount = useSelector((state: State) => state.bank)

  const handleChangeNumber = (e: ChangeEvent<HTMLInputElement>) => {
    setInputNumber(+e.target.value)
  }

  return (
    <div className="App">
      <h1>{amount}</h1>
      <button onClick={() => depositMoney(inputNumber)}>Deposit</button>
      <button onClick={() => withdrawMoney(inputNumber)}>Withdraw</button>
      <button onClick={() => bankrupt()}>Bankrupt</button>
      <input type="number" value={inputNumber} onChange={handleChangeNumber} />
    </div>
  );
}

export default App;

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