javascript - 绑定(bind)元素 'x' 隐式具有 'any' 类型

Question

我一直在尝试通过使用教程文章 (https://www.mikealche.com/software-development/learn-react-animations-by-creating-a-stripe-inspired-menu) 构建导航栏来学习和理解 Nextjs 和 TypeScript。

尽管菜单项似乎在本地工作并且下划线动画出现并跟随鼠标悬停(这是我在文章中得到的)我仍然遇到以下问题:

1. 菜单项.tsx
   • 绑定(bind)元素“text”隐式具有“any”类型。 ts(7031) [6,21]
   • 绑定(bind)元素“children”隐式具有“any”类型。 ts(7031) [6,27]
2. 子项目.tsx
   • 参数“title”隐式具有“any”类型。 ts(7006) [4,18]
   • 参数“text”隐式具有“any”类型。 ts(7006) [4, 25]
3. SubItemContainer.tsx
   • 绑定(bind)元素“children”隐式具有“any”类型。 TS(7031) [3,29]

我对 React、NextJs 和 TypeScript 还是很陌生，但一直在慢慢浏览文档、视频，并耐心学习。然而，我不太确定如何解决这个问题，或者找到一种方法来更好地减少这种情况在未来发生。

我已经在下面发布了文件。

感谢您对此提供的任何帮助或建议。

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;

Answer 1

虽然 typescript 在大多数情况下都能够推断类型，但它不能为 React prop 执行此操作，即使对于 children prop 也是如此。

删除所有XXX implicitly has an 'any' type在你的代码中，你需要添加一个 React.FC (代表功能组件)为您的组件使用 children和 React.FC<ComponentProps>使用自己的 Prop 时。

对于您的三个当前组件，您将拥有:

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

[...]