Binding element 'xxx' implicitly has an 'any' type error in Typescript

Question

I have a ReactJS project based on TypeScript. The following is one such file: Layout.tsx

import React from 'react';
import { Helmet } from 'react-helmet-async';
import NavigationBar from './navigation/NavigationBar';
import Footer from './footer/Footer';

const Layout = ({ title, description, children }) => {
     return (
          <>
               <Helmet>
                    <title>{title ? title + " - React Boilerplate" : "React.js Boilerplate"}</title>
                    <meta name="description" content={description || "React.js Boilerplate"} />
               </Helmet>
               <NavigationBar />
               <main className="container">
                    {children}
               </main>
               <Footer />
          </>
     );
}

export default Layout;

For this I am constantly getting: Binding element 'title' implicitly has an 'any' type. I tried solutions for this online, but all of them are for Javascript and seems not to match with mine. Help is appreciated here.

Does this answer your question? [Binding element 'index' implicitly has an 'any' type](https://stackoverflow.com/questions/40745992/binding-element-index-implicitly-has-an-any-type) — Lakshya Thakur, Feb 26 '21 at 08:35

score 14 · Answer 1 · edited Aug 23 '23 at 22:00

You are missing typing for your component (your function). First you have to tell TS that this is FunctionalComponent and second you have to tell it about its props.

Here is how you can do it:

import React from 'react';
import { Helmet } from 'react-helmet-async';
import NavigationBar from './navigation/NavigationBar';
import Footer from './footer/Footer';

interface LayoutProps {
  title?: string;
  description?: string;
}

const Layout: React.FC<LayoutProps> = ({ title, description, children }) => {
     return (
          <>
               <Helmet>
                    <title>{title ? title + " - React Boilerplate" : "React.js Boilerplate"}</title>
                    <meta name="description" content={description || "React.js Boilerplate"} />
               </Helmet>
               <NavigationBar />
               <main className="container">
                    {children}
               </main>
               <Footer />
          </>
     );
}

export default Layout;

Thanks for this, for title, description it will work. But for children will the String work? — Dext1232, Feb 26 '21 at 08:45

Binding element 'xxx' implicitly has an 'any' type error in Typescript

1 Answers1