React error Parameter 'props' implicitly has an 'any' type

The text starts here~

Overview

"Parameter 'props' implicitly has an 'any' type" error occurs when we do not declare a type for a function component or a class component props , or forget to install the type declaration file for React. To fix this error, explicitly set a type for the props object in your component.

install type file

The first thing you need to make sure is that you have React type declaration files installed. Open a terminal at the root of the project and run the following commands.

 # 👇️ 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 services.

declaration type

If that doesn't help, chances are you forgot to explicitly declare the type for the props of the function component 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 problem with the above snippet is that we don't set the type for the function component's props .

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

 // 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 explicitly declared an interface for the component's props and this resolved the error.

We don't need to set children property, but you must if you pass children to your component.

If you don't want to explicitly declare the props object type for your component, then 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;

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.

Generics

If you have a class component, you can use generics to declare types for it 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 components' props and state which resolved the error.

If you don't want to explicitly provide types for 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 entering the props and state objects, which effectively turned off type checking.

Now you will be able to access any properties on the this.props and this.state objects without getting a type check error.

re-install

如果错误没有解决， 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

If the error persists, make sure to restart your IDE and development services. VSCode crashes frequently and a restart sometimes solves the problem.