日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：chuck ? 更新時間： 2022-10-24 編程語言

引言

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

作者：Borislav Hadzhiev

正文從這開始~

總覽

當我們不在事件處理函數中為事件聲明類型時，會產生"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() {
  // ??? event is written inline
  return (
    <div>
      <input
        onChange={e => console.log(e.target.value)}
        type="text"
        id="message"
      />
    </div>
  );
}
export default App;

截圖顯示，當我們將鼠標懸浮在內聯事件處理器的e變量上時，我們得到了事件的正確類型。

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

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

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

我們將鼠標懸浮在內聯的e參數上，并發現其類型是什么。現在我們能夠將事件處理程序提取到一個函數中。

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

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

逃生艙any

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

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

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

確定類型

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

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

我們將鼠標懸浮在內聯的e參數上，發現提交事件應該類型聲明為React.FormEvent<HTMLFormElement>。

現在我們知道了正確的類型，我們就可以提取事件處理函數。

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;

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

TypeScript總是能夠推斷出內聯事件處理器的事件類型，因為你已經安裝了React的類型定義文件。

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

原文鏈接：https://juejin.cn/post/7136914937405784071

欄目分類
最近更新