脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React报错解决

React报错之Parameter event implicitly has an any type解决

 更新时间：2022年08月29日 14:52:44   作者：chuck  
这篇文章主要为大家介绍了React报错之Parameter event implicitly has an any type，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

原文链接：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

以上就是React报错之Parameter event implicitly has an any type解决的详细内容，更多关于React报错解决的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react-router-dom 嵌套路由的实现

    react-router-dom 嵌套路由的实现

    这篇文章主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 原生实现一个react-redux的代码示例

    原生实现一个react-redux的代码示例

    这篇文章主要介绍了原生实现一个react-redux的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • React Hooks核心原理深入分析讲解

    React Hooks核心原理深入分析讲解

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-12-12
  • 详解React中错误边界的原理实现与应用

    详解React中错误边界的原理实现与应用

    在React中,错误边界是一种特殊的组件,用于捕获其子组件树中发生的JavaScript错误,并防止这些错误冒泡至更高层,导致整个应用崩溃,下面我们就来看看它的具体应用吧
    2024-03-03
  • 浅谈React前后端同构防止重复渲染

    浅谈React前后端同构防止重复渲染

    这篇文章主要介绍了浅谈React前后端同构防止重复渲染，首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。有兴趣的可以了解一下
    2018-01-01
  • React+Koa实现文件上传的示例

    React+Koa实现文件上传的示例

    这篇文章主要介绍了React+Koa实现文件上传的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    最近在学习过程中遇到了很多问题,TabBarIOS的使用就是一个，所以下面这篇文章主要给大家介绍了关于React Native中TabBarIOS简单使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-10-10
  • 详解React 的几种条件渲染以及选择

    详解React 的几种条件渲染以及选择

    这篇文章主要介绍了详解React 的几种条件渲染以及选择，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React懒加载实现原理深入分析

    React懒加载实现原理深入分析

    懒加载意思是不会预加载，而是需要使用某段代码，某个组件或者某张图片时，才加载他们（延迟加载），这篇文章主要介绍了React懒加载实现原理
    2022-11-11
  • React 组件传 children 的各种案例方案详解

    React 组件传 children 的各种案例方案详解

    自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下,要自定义的组件其中包含一个 title 和一个 children,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10

最新评论