React – TypeScript – Binding element implicitly has an ‘any’ type, or how to use object destructuring with types

React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.

How to reproduce it

import { ReactElement } from 'react';

export default function Demo({ prop1, prop2 }): ReactElement {
    return (
        <div>
            <h1>Demo</h1>
            {prop1}, {prop2}
        </div>
    );
}

Solution #1

Use object destructuring with types.

import { ReactElement } from 'react';
export default function Demo({ prop1, prop2 }: { prop1: string, prop2: string }): ReactElement {
return (
<div>
<h1>Demo</h1>
{prop1}, {prop2}
</div>
);
}

Solution #2

Create an interface and use it as a type.

import { ReactElement } from 'react';
interface Props {
prop1: string;
prop2: string;
}
export default function Demo({ prop1, prop2 }: Props): ReactElement {
return (
<div>
<h1>Demo</h1>
{prop1}, {prop2}
</div>
);
}

• Share on Facebook