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

目录
  • 引言
  • 总览
  • 设置类型
  • 逃生舱any
  • 确定类型

引言

原文链接: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报错解决的资料请关注我们其它相关文章!

(0)

相关推荐

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    目录 react项目升级报错,babel报错,.babelrc配置兼容问题 遇到问题 最终解决方案 react运行报错TypeError 现记录一下思路 react项目升级报错,babel报错,.babelrc配置兼容问题 由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考. 遇到问题 digital envelope routi

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • React报错map() is not a function详析

    目录 总览 Array.isArray Array.from Object.keys 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用map()方法的值记录在console.log上,并确保只对有效的数组调用map. 这里有个示例来展示错误是如何发生的. const App = () => { const obj = {}; // ️ Uncaught TypeErro

  • 解决react中label标签for报错问题

    要求:点击账号或密码,自动将焦点转到相关的表单控件(input)上. 问题:功能可以使用,但是会有报错. 解决办法:react中label标签没有for属性,用htmlFor代替for属性 demo的代码: 报错 修改后的代码 到此这篇关于react中label标签for报错的文章就介绍到这了,更多相关react中label标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • React报错之Object is possibly null的问题及解决方法

    目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef

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

    目录 引言 总览 设置类型 逃生舱any 确定类型 引言 原文链接:bobbyhadz.com/blog/react-… 作者:Borislav Hadzhiev 正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决该错误,显示地为event参数声明类型. 比如说,在input元素上,将处理change事件声明类型为React.ChangeEvent<H

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错You provided a `checked` prop to a form field

    目录 总览 defaultChecked onChange 初始值 总览 当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误.为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性. 这里有个例子用来展示错误是如何发生的. // App.js export

  • 解决React报错Property 'value' does not exist on type EventTarget

    目录 总览 正确声明类型 找出类型 总结 总览 当event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误.为了解决该错误,将event的类型声明为React.ChangeEvent<HTMLInputElement> .然后就可以通过event.target.value 来访问其值. 这里有个示例用来展示错误是如何发生的. // App.tsx function App() { //

  • React报错信息之Expected an assignment or function call and instead saw an expression

    目录 正文从这开始~ 总览 显式返回 隐式返回 返回对象 正文从这开始~ 总览 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', '

  • 解决React报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

随机推荐