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

The text starts here~

Overview

"Parameter 'event' implicitly has an 'any' type" error is generated when we do not declare a type for the event in the event handler. To resolve the error, the parameter declaration type is displayed as event . For example, on the input element, the change event declaration type is React.ChangeEvent<HTMLInputElement> will be processed.

Here is an example to show how the error occurs.

 // App.tsx

function App() {
  // ⛔️ Parameter 'event' implicitly has an 'any' type.ts(7006)
  const handleChange = event => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

The problem with the example is that we don't explicitly declare the type for the event parameter of the event handler.

set type

To fix the error, we have to set a type for the parameter based on the event type.

 // App.tsx

function App() {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
    console.log(event.target);
  };

  return (
    <div>
      <input onChange={handleChange} type="text" id="message" />
    </div>
  );
}

export default App;

We declare the type of the event as React.ChangeEvent<HTMLInputElement> because we are declaring a onChange event for the input element.

The easiest way to find out the type of event is to write the event handler inline and hover over the event parameter of the function.

 // App.tsx

function App() {
  // 👇️ event is written inline
  return (
    <div>
      <input
        onChange={e => console.log(e.target.value)}
        type="text"
        id="message"
      />
    </div>
  );
}

export default App;

The screenshot shows that when we hover over the e variable of the inline event handler, we get the correct type of event.

This approach works for all event handlers, once you know the correct type of the event, you can extract the handler and declare it correctly.

Below is an example of how to determine the type of onClick event in the same way.

 // App.tsx

function App() {
  // 👇️ event is written inline
  return (
    <div>
      <button onClick={e => console.log(e)}>Click</button>
    </div>
  );
}

export default App;

We hover over the inline e parameter and find out what its type is. Now we can extract the event handler into a function.

 // App.tsx

function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default App;

The event is now of the correct type. We don't get the "Parameter 'event' implicitly has an 'any' type" error.

escape pod any

If you don't want to declare the type for the event correctly, you just want to get rid of the error, then you can set the event type to any .

 // App.tsx

function App() {
  // 👇️ explicitly set type to any
  const handleClick = (e: any) => {
    console.log(e.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default App;

In TypeScript, the any type effectively turns off type checking. So we can now access any property on event .

This resolves the error, because now the event is explicitly set to type any , whereas it was implicitly set to type any before.

However, in general we are better off avoiding the any type.

determine type

The following is an example of how to determine the event type of the onSubmit event on the table form element.

 function App() {

  // 👇️ event written inline
  return (
    <div>
      <form onSubmit={e => console.log(e)}></form>
    </div>
  );
}

export default App;

We hovered the mouse on the inline e parameter and found that the submission event should be declared as React.FormEvent<HTMLFormElement> .

Now that we know the correct type, we can extract the event handler.

 function App() {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(event.target);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;

This approach works for all event handlers, once you know the correct type of the event, you can extract your handler function and declare the type correctly.

TypeScript can always infer the event type of an inline event handler because you have React's type definition files installed.

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

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

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