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

user_14504014 0
Viewed 3016

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.

typescript reactjs
1 Answers

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 it's 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;
user_46382480
Related