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

# 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

First, make sure 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

Copied!
# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 👇️ with YARN
yarn add @types/react @types/react-dom --dev

make sure you have typings installed

Try restarting your IDE and development server.

# Explicitly typing the `props` of a component

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

App.tsx

Copied!
// ⛔️ 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 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

Copied!
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;

explicitly typing the props of component

The code for this article is available on GitHub

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 forget to type an event object, you'll get the Parameter 'event' implicitly has 'any' type error.

# Disable type checking by using the `any` type

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

App.tsx

Copied!
// 👇️ 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 code for this article is available on GitHub

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.

# Typing a Class component

If you have a class component, use a generic to type its props and state.

App.tsx

Copied!
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>
  );
}

The code for this article is available on GitHub

We explicitly provided types for the props and the state of the component.

# Disabling type checking for a class component

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

App.tsx

Copied!
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;

disabling type checking for class component

The code for this article is available on GitHub

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.

# Delete your node_modules and reinstall your dependencies

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.

If you are on macOS or Linux, issue the following commands in bash or zsh.

shell

Copied!
#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are on Windows, issue the following commands in CMD.

cmd

Copied!
# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

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