Parameter 'props' implicitly has 'any' type in React

avatar

Borislav Hadzhiev

Last updated: Apr 6, 2022

banner

Photo from Unsplash

Parameter 'props' implicitly has 'any' type in React #

The React.js error "Parameter 'props' implicitly has an 'any' type" occurs when we don't type the props of a function or class component or forget to install typings for React. To solve the error explicitly set a type for the props object in your components.

parameter props implicitly has any type

The first thing you should make sure is that you have installed the typings for React. Open your terminal in your project's root directory (where your package.json file is) and run the following command.

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

Try restarting your IDE and development server.

If that doesn't help, chances are you have forgotten to explicitly type the props for a function or class component.

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;

The issue in the code snippet above is that we haven't set the type for the props in the function component.

To solve the error, we have to explicitly type the props parameter.

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;

We defined an interface to type the component's props explicitly, which solves the error.

We didn't have to set the children prop, but you would have to do that if you pass children to your component.

If you don't want to have to explicitly type the props object for your component, you can use the any type.

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;

The any type effectively turns off type checking, so we are able to pass props to the component and access properties on the object without getting any type checking errors.

If you have a class component, use a generic to type its props and 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> ); }

We explicitly provided types for the props and state of the component, which solves the error.

If you don't want to have to explicitly type your component's props and state, you can use the any type.

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;

We used the any type when typing the props and state objects, which effectively turns off type checking.

Now you would be able to access any property on the this.props and this.state objects without getting a type checking error.

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell
# 👇️ 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

Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and a reboot solves things sometimes.

Conclusion #

The React.js error "Parameter 'props' implicitly has an 'any' type" occurs when we don't type the props of a function or class component or forget to install typings for React. To solve the error explicitly set a type for the props object in your components.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.