错误：参数“e”隐式具有“任何”类型。 TS7006 - 反应打字稿答案

【问题标题】：Error: Parameter 'e' implicity has an 'any' type. TS7006 - React Typescript错误：参数“e”隐式具有“任何”类型。 TS7006 - 反应打字稿
【发布时间】：2021-11-17 10:07:18
【问题描述】：

参数 'e' 隐含地具有 'any' 类型。 TS7006

15 |   const amount = useSelector((state: State) => state.bank)
16 | 
17 |   const handleChangeNumber = (e) => {
   |                               ^
18 |     setInputNumber(+e.target.value)
19 |   }
20 |

上面的错误信息，代码在下面，我不知道要修复它。我是打字稿的新手。我可以在变量中定义类型，但在参数中如何为 e 或 event 的确切类型定义 e 或 event 的类型

import "./App.css";
import { useState } 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) => {
    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;

【问题讨论】：

这能回答你的问题吗？ Typescript input onchange event.target.value

标签： reactjs typescript react-typescript

【解决方案1】：

你可以通过定义内联函数让TS自动推断类型：

onChange={(e) => {
  setInputNumber(e.currentTarget.value);
}}

或者你可以开始内联编写函数：

onChange={(e) => {
  
}}

然后将鼠标悬停在 VSCode 等类型感知编辑器中的参数上，以查看它是什么类型。这里是React.ChangeEvent<HTMLInputElement>，你可以这样做

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

然后返回onChange={handleChangeNumber}。

【讨论】：

【解决方案2】：

你可以如下使用。

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

【讨论】：

【解决方案3】：

您可以使用React.ChangeEvent<HTMLInputElement> 作为类型。

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

【讨论】：