绑定元素“xxx”在 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.

Answer 1

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;