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

更新时间：2022年12月02日 08:57:54 作者：Borislav Hadzhiev

这篇文章主要为大家介绍了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经常出现故障，重启有时会解决问题。

翻译原文链接：bobbyhadz.com/blog/react-…

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

您可能感兴趣的文章:

React Native 集成 ArcGIS 地图的详细过程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,本文给大家介绍React Native 集成 ArcGIS 地图的详细过程,感兴趣的朋友跟随小编一起看看吧
2024-06-06
React.js组件实现拖拽排序组件功能过程解析
这篇文章主要介绍了React.js组件实现拖拽排序组件功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
React中hook函数与useState及useEffect的使用
这篇文章主要介绍了React中hook函数与useState及useEffect的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
详解React Native 采用Fetch方式发送跨域POST请求
这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React的createElement和render手写实现示例
这篇文章主要为大家介绍了React的createElement和render手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
一起来学习React元素的创建和渲染
这篇文章主要为大家详细介绍了React元素的创建和渲染，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
React学习之受控组件与数据共享实例分析
这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
2020-01-01
React之使用useState异步刷新的问题
这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React实现合成事件的源码分析
React 中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下
2022-12-12
一文教你如何避免React中常见的8个错误
这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下
2023-12-12