javascript - Bindelementet 'x' har implicit typen 'any'

Jag har arbetat med att försöka lära mig och förstå Nextjs och TypeScript genom att försöka bygga en Navbar med hjälp av en handledningsartikel (https://www.mikealche.com/software-development/learn-react-animations-by-creating-a-stripe-inspired-menu).

Trots att menyerna verkar fungera lokalt och understrykningen kommer in och följer muspekaren vid hover (detta är så långt jag har kommit i artikeln) får jag fortfarande följande problem:

  1. MenyObjekt.tsx

    • Bindande element 'text' har implicit typen 'any'. ts(7031) [6,21]
    • Bindningselementet 'children' har implicit typen 'any'. ts(7031) [6,27]

  2. SubItem.tsx

    • Parametern 'title' har implicit typen 'any'. ts(7006) [4,18]
    • Parametern 'text' har implicit typen 'any'. ts(7006) [4, 25]

  3. SubItemContainer.tsx

    • Bindningselementet 'children' har implicit typen 'any'. ts(7031) [3,29]

Jag är fortfarande ganska ny med React, NextJs och TypeScript men har långsamt gått igenom dokumentationen, videorna och har tålamod med att lära mig. Dock är jag inte helt säker på hur jag ska fixa detta, eller hitta ett sätt att bättre motverka att detta händer i framtiden.

Jag har gått vidare och lagt upp filerna nedan.

Tack för all hjälp med detta eller förslag.

Navbar.tsx

import React from "react";
import MenuItem from "./MenuItem";
import SubItem from "./SubItem";
import { motion } from "framer-motion";

const Navbar = () => {
  return (
    <div className="w-screen p-20">
      <motion.div className="flex justify-center p-10 border">
        <MenuItem text={"Home"}>
          <SubItem title="Product" text="A SaaS for e-commerce" />
          <SubItem title="Blog" text="Latest posts" />
          <SubItem title="Contact" text="Get in touch" />
        </MenuItem>
        <MenuItem text={"About"} style={{ minWidth: 400 }}>
          <SubItem title="The Team" text="Get to know us better" />
          <SubItem title="The Company" text="Since 1998" />
          <SubItem
            title="Our Mission"
            text="Increase the GDP of the internet"
          />
          <SubItem title="Investors" text="who's backing us" />
        </MenuItem>
        <MenuItem text={"Products"} style={{ minWidth: 400 }}>
          <SubItem
            title="Ecommerce"
            text="Unify online and in-person payments"
          />
          <SubItem
            title="Marketplaces"
            text="Pay out globally and facilitate multiparty payments"
          />
          <SubItem
            title="Platforms"
            text="Let customers accept payments within your platform"
          />
          <SubItem
            title="Creator Economy"
            text="Facilitate on-platform payments and pay creators globally"
          />
        </MenuItem>
      </motion.div>
    </div>
  );
};

export default Navbar;

MenuItem.tsx

import { motion } from "framer-motion";
import { useState } from "react";
import Underline from "./Underline";
import SubItemContainer from "./SubItemContainer";

const MenuItem = ({ text, children, ...props }) => {
  const [isBeingHovered, setIsBeingHovered] = useState(false);

  return (
    <motion.div
      className="relative px-10 cursor-pointer"
      onHoverStart={() => setIsBeingHovered(true)}
      onHoverEnd={() => setIsBeingHovered(false)}
    >
      <span className="relative">
        {text}
        {isBeingHovered && <Underline />}
      </span>
      {isBeingHovered && <SubItemContainer>{children}</SubItemContainer>}
    </motion.div>
  );
};

export default MenuItem;

SubItem.tsx

import { Hashicon } from "@emeraldpay/hashicon-react";
import React from "react";

const SubItem = (title, text) => {
  return (
    <div className="my-2 cursor-pointer group min-w-max">
      <div className="flex items-center gap-4">
        <Hashicon value={title} size={25} />
        <div className="">
          <p className="font-bold text-gray-800 group-hover:text-blue-900 text-md">
            {title}
          </p>
          <span className="text-sm font-bold text-gray-400 group-hover:text-blue-400">
            {text}
          </span>
        </div>
      </div>
    </div>
  );
};

export default SubItem;

SubItemContainer.tsx

import { motion } from "framer-motion";

const SubItemContainer = ({ children }) => {
  return (
    <div className="py-5 min-w-max">
      <motion.div
        layoutId="menu"
        className="absolute border border-1 shadow-lg py-10 px-10 bg-white rounded-box -left-2/4"
        style={{ minWidth: 400 }}
        initial="hiddens"
        animate="visible"
      >
        {children}
      </motion.div>
    </div>
  );
};

export default SubItemContainer;

Svar #1

Även om TypeScript oftast kan härleda typer, kan det inte göra det för React-props, inte ens för children-props.

För att ta bort alla XXX har implicit en 'any'-typ i din kod, behöver du lägga till en React.FC (står för Funktionell Komponent) för dina komponenter som använder children och React.FC<ComponentProps> när du använder dina egna props.

För dina tre nuvarande komponenter skulle du ha:

MenuItem.tsx

[...]

// Define your component props
type MenuItemProps = {
  text: string;
  // ...rest of your props
}

// Add props
const MenuItem: React.FC<MenuItemProps> = ({ text, children, ...props }) => {

[...]

SubItem.tsx

[...]

// Define your component props
type SubItemProps = {
  title: string;
  text: string;
}

// Add props and fix your code as props is the first parameter
const SubItem: React.FC<SubItemProps> = ({ title, text }) => {

[...]

SubItemContainer.tsx

[...]

// Only add React.FC 
const SubItemContainer: React.FC = ({ children }) => { type

[...]

Relaterade artiklar