Binding element 'X' implicitly has an 'any' type in React

Binding element 'X' implicitly has an 'any' type in React #

The error "Binding element implicitly has an 'any' type" occurs when we define a function, e.g. a React component that takes an object as a parameter, but don't set a type for the object. To solve the error, make sure to explicitly type the object parameter of the function.

Here is an example of how the error occurs.

App.tsx

Copied!
// ⛔️ Error: Binding element 'children' implicitly has an 'any' type.ts(7031)
const Button = ({children, ...props}) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};

The Button component takes an object parameter (the props) and tries to destructure properties from it, but we haven't set the type of the object.

To solve the error, use the React.FunctionComponent type and type the object parameter.

App.tsx

Copied!
type ButtonProps = {
  onClick(): void;
  name: string;
  children: React.ReactNode;
};

const Button: React.FunctionComponent<ButtonProps> = ({children, ...props}) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Button name="James" onClick={() => console.log('Button clicked')}>
        <span>Click me</span>
      </Button>
    </div>
  );
}

export default App;

The Button component in the example takes an object that has the children, onClick and name properties.

If you don't know the type of a specific property on the object and want to turn off type checking, set its type to any.

Note that the type of the children property is set to ReactNode.

An alternative approach is to directly type the object.

App.tsx

Copied!
type ButtonProps = {
  onClick(): void;
  name: string;
  children: React.ReactNode;
};

// 👇️ Type function parameter inline
const Button = ({children, ...props}: ButtonProps) => {
  const {onClick, name} = props;

  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={onClick}>{children}</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Button name="James" onClick={() => console.log('Button clicked')}>
        <span>Click me</span>
      </Button>
    </div>
  );
}

export default App;

Notice that we didn't use the FunctionComponent type in the example.

The main difference between this approach and using FunctionComponent to type a component is that the FunctionComponent type sets the return type of the function to ReactElement | null and we didn't explicitly do that in the function above.

This should be your preferred approach if you're trying to type a function that takes an object as a parameter, but is not a react component.

index.ts

Copied!
function example({name, age}: {name: string; age: number}) {
  return {name, age};
}

Notice that we separate the object parameter and its type with a colon. The following is not valid syntax.

index.ts

Copied!
// ⛔️ Binding element implicitly has an 'any' type.ts(7031)
function example({name: string, age: number}) {
  return {name, age};
}

What happens in the code snippet above is - we destructure the name property from the object parameter and give it a name of string.

Then, we destructure the age property and give it a name of number.

Always make sure to separate the object parameter and its type with a colon.

If your function definition looks busy, use a type alias or an interface.

index.ts

Copied!
type Person = {
  name: string;
  age: number;
};

function example({name, age}: Person) {
  return {name, age};
}

This is a bit easier to read, especially when you have object parameters with many properties.

If you don't know the type of an object's property and want to disable type checking for it, set its type to any.

index.ts

Copied!
type Person = {
  name: string;
  age: number;
  veryComplicated: any; // 👈️ disable type checking for property
};

// ⛔️ Binding element implicitly has an 'any' type.ts(7031)
function example({name, age, veryComplicated}: Person) {
  return {name, age, veryComplicated};
}

When we set the type of a property to any, it effectively turns of type checking for the specific property.

The same approach can be used to disable type checking for the entire object parameter.

index.ts

Copied!
// 👇️ set object to any
function example({name, age, veryComplicated}: any) {
  return {name, age, veryComplicated};
}

This is not advisable and any should be used sparingly because it turns off all type checking for the specific value.

Binding element 'X' implicitly has an 'any' type in React

Binding element 'X' implicitly has an 'any' type in React #

Borislav Hadzhiev