Problem

The error "Binding element x implicitly has an 'any' type" occurs in the ReactJS application written using TypeScript.

See the following code:

  const Book = (props) => { 
  // Binding element 'props' implicitly has an 'any' type.  👈
    const { name, author, price } = props;

    return (
      <div>
        <h1>Title: {name}</h1>
        <h1>Author: {author}</h1>
        <h1>Price: ${price}</h1>
      </div>
    );
  };
App.tsx

The error occurred due to the inexistence of prop type definition. In order to fix it, we need to define the type of possible props that will be passed down the function.

Solution

type BookProps = {
  name: string;
  author: string;
  price: number;
};

const Book: React.FunctionComponent<BookProps> = (props) => {
  const { name, author, price } = props;

  return (
    <div>
      <h1>Title: {name}</h1>
      <h1>Author: {author}</h1>
      <h1>Price: ${price}</h1>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Book {...{ name: "book1", author: "Sharooq", price: 1000 }} />
    </div>
  );
}

export default App;
App.tsx

In the complete code above, we defined a type alias named "BookProps" and passed it to the "Book" component along with the "React.FucntionComponent" type.

"React.FucntionComponent" type defined for the react fucntion itself. It takes in a set of props whose type we define inside "< >" and also define a return type for the fuction as `ReactElement | null'.

In the "BookProps" type, we have set the 'name' to string, 'author' to string and 'price' to number. Now, if we pass a value that doesn't match the exact type, TypeScript will give an error inside the code editor, even before running the code. This is how useful TypeScript is.

Different methods of type defining

1. Passing prop types directly to object

We have seen one way of defining type in the above example. It is a little too "syntaxy". An alternate method would be to pass the prop types directly to the object.

type BookProps = {
  name: string;
  author: string;
  price: number;
};

const Book = (props: BookProps) => {
  const { name, author, price } = props;

  return (
    <div>
      <h1>Title: {name}</h1>
      <h1>Author: {author}</h1>
      <h1>Price: ${price}</h1>
    </div>
  );
};
App.tsx

Here, we omitted the "React.FunctionComponent", thereby losing the React function return type definition. However, the code is still well compatible in this situation.

2. Defining the type along with the object

const Book = (props: { name: string; author: string; price: number }) => {
  const { name, author, price } = props;

  return (
    <div>
      <h1>Title: {name}</h1>
      <h1>Author: {author}</h1>
      <h1>Price: ${price}</h1>
    </div>
  );
};
App.tsx

Here, instead of passing a type alias, we defined the prop types next to the "props" followed by a semicolon

const Book = ({ name, author, price }: { name: string; author: string; price: number }) => {
  return (
    <div>
      <h1>Title: {name}</h1>
      <h1>Author: {author}</h1>
      <h1>Price: ${price}</h1>
    </div>
  );
};
App.tsx

We can follow the same syntax convention even if we are destructuring the props like in the above code.

Best practice

It is best practice to use either a type alias or interface to define prop types as I have shown in the first example in the beginning. This will make your code easy to read and organize. The syntax for type alias or interface is almost similar. However, there are differences such as how one can extend another object or how they are named in an error message, etc.

type ExampleType = {
  name: string;
  author: string;
  price: number;
};

interface ExampleInterface {
  name: string;
  author: string;
  price: number;
}
Examples of type alias and interface

Want to read about the benefits of using TypeScript in ReactJS? Check my article below.

TypeScript with ReactJS ?
In this article, you’ll learn all you require to know to begin using TypeScript and React, and more critically we’ll discuss why or why you should not utilize this. There’s a decent case to be made for both sides of that argument.
TypeScript with ReactJS ?Sharooq Salaudeen

Thank you for reading and I hope I have given you a good understanding of why the error occurs, how to solve and the best practices to follow in this article. Check my featured posts to find other interesting articles. See you in the next one.