React報錯之Parameter 'event' implicitly has an 'any' type

2022-08-29 06:02:29

正文從這開始~

總覽

當我們不在事件處理常式中為事件宣告型別時,會產生"Parameter 'event' implicitly has an 'any' type"錯誤。為了解決該錯誤,顯示地為event引數宣告型別。比如說,在input元素上,將處理change事件宣告型別為React.ChangeEvent<HTMLInputElement>

這裡有個範例用來展示錯誤是如何發生的。

// App.tsx

function App() {
  // ⛔️ Parameter 'event' implicitly has an 'any' type.ts(7006)
  const handleChange = event => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

範例中的問題在於,我們沒有顯示地為事件處理常式的event引數宣告型別。

設定型別

為了解決該錯誤,我們必須根據事件型別為引數設定一個型別。

// App.tsx

function App() {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

我們將事件的型別宣告為React.ChangeEvent<HTMLInputElement> ,因為我們正在為input元素宣告一個onChange事件。

你要找出事件的型別,最簡單的方法是將事件處理器內聯編寫,並將滑鼠懸浮在函數的event引數上。

// App.tsx

function App() {
  //