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;
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}
.