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

Posted 2023-02-22

【中文标题】错误：参数“e”隐式具有“任何”类型。 TS7006 - 反应打字稿

【英文标题】：Error: Parameter 'e' implicity has an 'any' type. TS7006 - React Typescript

【发布时间】：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

【参考方案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)