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