正文从这开始~

总览

当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误。为了解决这个错误,在你的组件中明确地为props对象设置一个类型。

安装类型文件

你首先要确定的是你已经安装了React类型声明文件。在项目的根目录下打开终端,并运行以下命令。

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

尝试重启你的IDE和开发服务。

声明类型

如果这没有帮助,你有可能忘记明确地为函数组件或类组件的props声明类型。

// App.tsx

// ️ Parameter 'props' implicitly has an 'any' type.ts(7006)
function Person(props) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
} function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
} export default App;

上述代码片段的问题在于,我们没有为函数组件的props设置类型。

为了解决该错误,我们必须显示地props参数类型。

// App.tsx

interface PersonProps {
name: string;
age: number;
country: string;
children?: React.ReactNode; // ️ for demo purposes
} function Person(props: PersonProps) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
} function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
} export default App;

我们为组件的props显示地声明了一个接口,这就可以解决错误。

我们不需要设置children属性,但如果你向你的组件传递children,你就必须这样做。

如果你不想为你的组件明确地声明props对象类型,那么你可以使用any类型。

// App.tsx

// ️ set type to any
function Person(props: any) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
} function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
} export default App;

any类型有效地关闭了类型检查,所以我们能够向组件传递props,并访问对象上的属性,而不会得到任何类型检查错误。

泛型

如果你有一个类组件,可以使用泛型来为其propsstate声明类型。

// App.tsx

import React from 'react';

interface PersonProps {
name: string;
age: number;
country: string;
children?: React.ReactNode;
} interface PersonState {
value: string;
} // ️ React.Component<PropsType, StateType>
class Person extends React.Component<PersonProps, PersonState> {
render() {
return (
<div>
<h2>{this.props.name}</h2>
<h2>{this.props.age}</h2>
<h2>{this.props.country}</h2>
</div>
);
}
} export default function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
}

我们明确地为组件的propsstate提供了类型,这就解决了这个错误。

如果你不想明确地为你的组件的propsstate提供类型,你可以使用any类型。

// App.tsx

import React from 'react';

// ️ type checking disabled for props and state
class App extends React.Component<any, any> {
constructor(props: any) {
super(props); this.state = {value: ''};
} handleChange = (event: any) => {
this.setState({value: event.target.value});
}; render() {
return (
<div>
<form>
<input
onChange={this.handleChange}
type="text"
value={this.state.value}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
} export default App;

我们在输入propsstate对象时使用了any类型,这有效地关闭了类型检查。

现在你将能够访问this.propsthis.state对象上的任何属性而不会得到类型检查错误。

重新安装

如果错误没有解决,尝试删除你的node_modulespackage-lock.json(不是package.json)文件,重新运行npm install并重新启动你的IDE。

# ️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json # ️ clean npm cache
npm cache clean --force npm install

如果错误仍然存在,请确保重新启动你的IDE和开发服务。VSCode经常出现故障,重启有时会解决问题。

React报错之Parameter 'props' implicitly has an 'any' type的更多相关文章

  1. React报错之Parameter 'event' implicitly has an 'any' type

    正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决 ...

  2. React报错之Property 'value' does not exist on type EventTarget

    正文从这开始~ 总览 当event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误.为了解决 ...

  3. React报错之Property 'X' does not exist on type 'HTMLElement'

    正文从这开始~ 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLEl ...

  4. React报错之Property 'value' does not exist on type 'HTMLElement'

    正文从这开始~ 总览 当我们试图访问一个类型为HTMLElement的元素上的value属性时,会产生"Property 'value' does not exist on type 'HT ...

  5. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  6. notification 报错the method build() is undefined for the type Notificatin.Builder

    notification 报错the method build() is undefined for the type Notificatin.Builder 这事api版本号太低导致的 Notifi ...

  7. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  8. react报错this.setState is not a function

    当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...

  9. MyBatis批量操作报错:Parameter 'xxxList' not found. Available parameters are [list]

    问题背景: 在Dao中使用MyBatis进行查询操作,参数是传的一个List:studentNameList,但是在执行查询的时候报错,具体日志如下: com.chenzhou.base.mybati ...

随机推荐

  1. Gitee整改之思考

    本文主要内容如下: 1.Gitee是什么? 2.Gitee与Github的区别有哪些? 3.为什么要使用Gitee? 4.Gitee的商业模式是怎样的? 5.Gitee为何会被整改? 6.Gitee这 ...

  2. .NET中线程锁的使用

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月1日. 一.说明 由于经常需要在多线程代码中使用Monitor进行同步,并且需要自己去手写try/finally块.因此C#提供了 ...

  3. Quartus II 13.0 sp1的官方下载页面

    今天为了下个ModelSim跑到网上去找下载资源,清一色的百度网盘,下载速度60k/s,简直有病,于是跑到Intel官网上把连接挖出来了,供各位直接下载 实测使用IDM多线程下载速度可以轻松上到数MB ...

  4. Spring框架系列(2) - Spring简单例子引入Spring要点

    上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...

  5. 关于Thymeleaf无法取值问题

    SpringBoot2.7以前的版本在获取model中数据的时候不需要注释,2.7以后的版本需要加注释,它无法直接取存在model中的数据,不加注释的时候会爆红但是可以正常使用,这个注释的含义就是指定 ...

  6. idea 内置tomcat jersey 上传文件报403错误

    Request processing failed; nested exception is com.sun.jersey.api.client.UniformInterfaceException: ...

  7. 【问题解决】Axios调用文件下载获取不到文件名

    问题描述 自己开发了一个后端下载文件的接口,然后通过浏览器直接访问这个接口,浏览器能正确得到文件名并下载: 而使用Axios时发现获取不到,经过打印响应体发现响应头里没有文件名 而Java后端代码里是 ...

  8. highcharts图表及报表展示、导出数据

    @ 目录 前言 一.使用highcharts前后端交互展示图表,及使用报表导出 二.实现思路 1.图表可以选择echarts.highcharts,我们这里选择highcharts(echarts使用 ...

  9. CF665B Shopping

    CF665B Shopping 题目描述 Ayush is a cashier at the shopping center. Recently his department has started ...

  10. centos安装torch==1.4.0与相关细节

    对于某些直接安装torch==1.4.0报错的情况(没错,就是我遇到了) 在网上查找了,大概的解决方法是先安装一个低版本的torch和torchvision, torchvision是pytorch中 ...