Borislav Hadzhiev
Thu Mar 17 2022·3 min read
Photo by Lechon Kirb
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.
// ⛔️ 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> ); };
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.
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.
any
.Note that the type of the children
property is set to ReactNode
.
An alternative approach is to directly type the object.
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.
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.
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.
// ⛔️ 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
.
If your function definition looks busy, use a type alias or an interface.
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
.
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.
// 👇️ 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.