React報(bào)錯(cuò)之Parameter event implicitly has an any type解決

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

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

引言

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

作者：Borislav Hadzhiev

正文從這開(kāi)始~

總覽

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

比如說(shuō)，在input元素上，將處理change事件聲明類(lèi)型為React.ChangeEvent<HTMLInputElement> 。

這里有個(gè)示例用來(lái)展示錯(cuò)誤是如何發(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;

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

設(shè)置類(lèi)型

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

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

我們將事件的類(lèi)型聲明為React.ChangeEvent<HTMLInputElement> ，因?yàn)槲覀冋跒?code>input元素聲明一個(gè)onChange事件。

你要找出事件的類(lèi)型，最簡(jiǎn)單的方法是將事件處理器內(nèi)聯(lián)編寫(xiě)，并將鼠標(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í)，我們得到了事件的正確類(lèi)型。

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

下面是一個(gè)例子，說(shuō)明如何用同樣的方法確定onClick事件的類(lèi)型。

// 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)其類(lèi)型是什么。現(xiàn)在我們能夠?qū)⑹录幚沓绦蛱崛〉揭粋€(gè)函數(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)在事件的類(lèi)型正確了。我們不會(huì)得到"Parameter 'event' implicitly has an 'any' type"錯(cuò)誤。

逃生艙any

如果你不想正確地為事件聲明類(lèi)型，你只是想擺脫錯(cuò)誤，那么可以將事件類(lèi)型設(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類(lèi)型可以有效地關(guān)閉類(lèi)型檢查。因此，我們現(xiàn)在可以在event上訪問(wèn)任何屬性。

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

然而，一般來(lái)說(shuō)我們最好避免使用any類(lèi)型。

確定類(lèi)型

下面是一個(gè)如何確定表form元素上的onSubmit事件類(lèi)型的例子。

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)該類(lèi)型聲明為React.FormEvent<HTMLFormElement>。

現(xiàn)在我們知道了正確的類(lèi)型，我們就可以提取事件處理函數(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;

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

TypeScript總是能夠推斷出內(nèi)聯(lián)事件處理器的事件類(lèi)型，因?yàn)槟阋呀?jīng)安裝了React的類(lèi)型定義文件。

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

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

您可能感興趣的文章: