React報錯之Parameter event implicitly has an any type解決

更新時間：2022年08月29日 14:52:44 作者：chuck

這篇文章主要為大家介紹了React報錯之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

原文鏈接：bobbyhadz.com/blog/react-…

作者：Borislav Hadzhiev

正文從這開始~

總覽

當(dāng)我們不在事件處理函數(shù)中為事件聲明類型時，會產(chǎn)生"Parameter 'event' implicitly has an 'any' type"錯誤。為了解決該錯誤，顯示地為event參數(shù)聲明類型。

比如說，在input元素上，將處理change事件聲明類型為React.ChangeEvent<HTMLInputElement> 。

這里有個示例用來展示錯誤是如何發(fā)生的。

// 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;

示例中的問題在于，我們沒有顯示地為事件處理函數(shù)的event參數(shù)聲明類型。

設(shè)置類型

為了解決該錯誤，我們必須根據(jù)事件類型為參數(shù)設(shè)置一個類型。

// 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事件。

你要找出事件的類型，最簡單的方法是將事件處理器內(nèi)聯(lián)編寫，并將鼠標(biāo)懸浮在函數(shù)的event參數(shù)上。

// App.tsx
function App() {
  // ??? event is written inline
  return (
    <div>
      <input
        onChange={e => console.log(e.target.value)}
        type="text"
        id="message"
      />
    </div>
  );
}
export default App;

截圖顯示，當(dāng)我們將鼠標(biāo)懸浮在內(nèi)聯(lián)事件處理器的e變量上時，我們得到了事件的正確類型。

這種方法適用于所有的事件處理器，一旦你知道了事件的正確類型，你就可以提取處理函數(shù)并正確對其類型聲明。

下面是一個例子，說明如何用同樣的方法確定onClick事件的類型。

// App.tsx
function App() {
  // ??? event is written inline
  return (
    <div>
      <button onClick={e => console.log(e)}>Click</button>
    </div>
  );
}
export default App;

我們將鼠標(biāo)懸浮在內(nèi)聯(lián)的e參數(shù)上，并發(fā)現(xiàn)其類型是什么?，F(xiàn)在我們能夠?qū)⑹录幚沓绦蛱崛〉揭粋€函數(shù)中。

// App.tsx
function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e.target);
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}
export default App;

現(xiàn)在事件的類型正確了。我們不會得到"Parameter 'event' implicitly has an 'any' type"錯誤。

逃生艙any

如果你不想正確地為事件聲明類型，你只是想擺脫錯誤，那么可以將事件類型設(shè)置為any。

// App.tsx
function App() {
  // ??? explicitly set type to any
  const handleClick = (e: any) => {
    console.log(e.target);
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}
export default App;

在TypeScript中，any類型可以有效地關(guān)閉類型檢查。因此，我們現(xiàn)在可以在event上訪問任何屬性。

這樣就解決了錯誤，因為現(xiàn)在事件被顯式地設(shè)置為any類型，而之前是隱式地設(shè)置為any類型。

然而，一般來說我們最好避免使用any類型。

確定類型

下面是一個如何確定表form元素上的onSubmit事件類型的例子。

function App() {
  // ??? event written inline
  return (
    <div>
      <form onSubmit={e => console.log(e)}></form>
    </div>
  );
}
export default App;

我們將鼠標(biāo)懸浮在內(nèi)聯(lián)的e參數(shù)上，發(fā)現(xiàn)提交事件應(yīng)該類型聲明為React.FormEvent<HTMLFormElement>。

現(xiàn)在我們知道了正確的類型，我們就可以提取事件處理函數(shù)。

function App() {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(event.target);
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}
export default App;

這種方法適用于所有的事件處理器，一旦你知道了事件的正確類型，你就可以提取你的處理函數(shù)并正確地聲明類型。

TypeScript總是能夠推斷出內(nèi)聯(lián)事件處理器的事件類型，因為你已經(jīng)安裝了React的類型定義文件。

# ??? with NPM
npm install --save-dev @types/react @types/react-dom
# ----------------------------------------------
# ??? with YARN
yarn add @types/react @types/react-dom --dev

以上就是React報錯之Parameter event implicitly has an any type解決的詳細(xì)內(nèi)容，更多關(guān)于React報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: