React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~
总览
当我们没有为函数组件或者类组件的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
,并访问对象上的属性,而不会得到任何类型检查错误。
泛型
如果你有一个类组件,可以使用泛型来为其props
和state
声明类型。
// 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>
);
}
我们明确地为组件的props
和state
提供了类型,这就解决了这个错误。
如果你不想明确地为你的组件的props
和state
提供类型,你可以使用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;
我们在输入props
和state
对象时使用了any
类型,这有效地关闭了类型检查。
现在你将能够访问this.props
和this.state
对象上的任何属性而不会得到类型检查错误。
重新安装
如果错误没有解决,尝试删除你的node_modules
和package-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的更多相关文章
- React报错之Parameter 'event' implicitly has an 'any' type
正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决 ...
- React报错之Property 'value' does not exist on type EventTarget
正文从这开始~ 总览 当event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误.为了解决 ...
- React报错之Property 'X' does not exist on type 'HTMLElement'
正文从这开始~ 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLEl ...
- React报错之Property 'value' does not exist on type 'HTMLElement'
正文从这开始~ 总览 当我们试图访问一个类型为HTMLElement的元素上的value属性时,会产生"Property 'value' does not exist on type 'HT ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- notification 报错the method build() is undefined for the type Notificatin.Builder
notification 报错the method build() is undefined for the type Notificatin.Builder 这事api版本号太低导致的 Notifi ...
- react报错 TypeError: Cannot read property 'setState' of undefined
代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...
- react报错this.setState is not a function
当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...
- MyBatis批量操作报错:Parameter 'xxxList' not found. Available parameters are [list]
问题背景: 在Dao中使用MyBatis进行查询操作,参数是传的一个List:studentNameList,但是在执行查询的时候报错,具体日志如下: com.chenzhou.base.mybati ...
随机推荐
- React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...
- Leetcode----<Diving Board LCCI>
题解如下: public class DivingBoardLCCI { /** * 暴力解法,遍历每一种可能性 时间复杂度:O(2*N) * @param shorter * @param long ...
- TopoLVM: 基于LVM的Kubernetes本地持久化方案,容量感知,动态创建PV,轻松使用本地磁盘
正文 研发测试场景下,一般追求的是一键快速起环境,横向动态复制,一人一套,随起随用,用完即走.作为使用方,其不用关心实际的物理资源是怎样的,环境起在哪里,只要声明自己的使用需求即可.但作为方案构建者以 ...
- web文本划线的极简实现
开篇 文本划线是目前逐渐流行的一个功能,不管你是小说阅读网站,还是卖教程的的网站,一般都会有记笔记或者评论的功能,传统的做法都是在文章底部加一个评论区,优点是简单,统一,缺点是不方便对文章的某一段或一 ...
- NC15975 小C的记事本
NC15975 小C的记事本 题目 题目描述 小C最近学会了java小程序的开发,他很开心,于是想做一个简单的记事本程序练练手. 他希望他的记事本包含以下功能: 1.append(str),向记事本插 ...
- VS Code 调教日记(2022.6.26更新)
VS Code 调教日记(2022.6.26更新) 基于msys2的MinGW-w64 GCC的环境配置 下载并安装msys2 到路径...msys2安装路径...\msys64\etc\pacman ...
- Thread类的常用方法_sleep和创建多线程程序的第二种方式_实现Runnable接口
sleep方法是在Thread类中的一个静态方法,当一个线程调用了sleep方法,被调用的那个线程就会暂时的让出指定时间的CPU执行权,在这段时间也不会参与CPU的调度,当时间到了之后,就会重新回到就 ...
- 配置git的ssh
Linux,Windows就在git bash here里面输 ① 初始化git账户 git config --global user.name "Eisen" git confi ...
- 攻防世界MISC进阶区---41-45
41.Get-the-key.txt 得到无类型文件,扔进kali中,strings一下,得到了一堆像flag的内容 扔进010 Editor中,搜索关键字,发现一堆文件,改后缀为zip 打开,直接得 ...
- SQLZOO练习二--SELECT from Nobel Tutorial
We continue practicing simple SQL queries on a single table. This tutorial is concerned with a table ...