Error: Parameter 'e' implicity has an 'any' type. TS7006 - React Typescript

Question

Parameter 'e' implicitly has an 'any' type. TS7006

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

That error message in above, and the code is below, i don't have any idea to fix it. im newbie at typescript. I can defined type in variable but in parameter how to define type of e or event for exactly type of e or 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;

Answer 1

You can let TS infer the type automatically by defining the function inline:

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

Or you can start writing the function inline:

onChange={(e) => {
  
}}

and then hover over the argument in a type-aware editor like VSCode to see what type it is. Here, it's React.ChangeEvent<HTMLInputElement>, so you can do

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

and go back to onChange={handleChangeNumber}.

Answer 2

You can use as follows.

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

Answer 3

You can use React.ChangeEvent<HTMLInputElement> as type.

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