解决React报错Parameter 'props' implicitly has an 'any' type
作者:Borislav Hadzhiev
总览
当我们没有为函数组件或者类组件的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 报错解决的资料请关注脚本之家其它相关文章!