typrcript reactjs: в типе отсутствуют следующие свойства

Question

У меня есть следующий массив со следующей структурой:

export const SideBarTags = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: faFileAlt,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: faNewspaper,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: faMeteor,
    active: false,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: faWallet,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

И поэтому я пытаюсь использовать его в реакции компонента:

interface MenuItem {
  index: Number;
  tag: {
    name: String;
    link: String;
    icon: any;
    dropdownItems: any;
  };
  setVisible: Function;
  visibleMenu: boolean;
  isOpen: boolean;
}
const MenuItem: React.FC<MenuItem> = ({
  tag,
  visibleMenu,
  setVisible,
  index,
  isOpen,
}) => {
  const { name, dropdownItems, icon } = tag;
  const handleClick = (index) => {
    if (visibleMenu === true) return setVisible('none');
    if (visibleMenu === index) return setVisible('none');
    return setVisible(index);
  };

  return (

  );
};
const MenuTags: React.FC<MenuTags> = ({ sideisOpen }) => {
  const [menuItems, setMenuItems] = useState(SideBarTags);
  console.log(menuItems);

  return (
    <MenuList open={sideisOpen}>
      {menuItems.map((item, index) => (
        <MenuTagsItems
          key={item.name}
          menuItem={item}
          sideisOpened={sideisOpen}
          tagFunction={setMenuItems}
        />
      ))}
    </MenuList>
  );
};

, но я получил эту ошибку :

Type '{name: string; ссылка: строка; icon: IconDefinition; активный: логический; dropdownItems: {имя: строка; ссылка: строка; } []; } 'нельзя назначить типу' {name: string; ссылка: строка; значок: любой; dropdownItems: {имя: строка; ссылка: строка; } | значение NULL; активный: логический; }». Типы свойства dropdownItems несовместимы. Тип '{имя: строка; ссылка: строка; } [] 'отсутствуют следующие свойства из типа' {name: string; ссылка: строка; } ': имя, ссылка TS2322

Answer 1

В вашем интерфейсе вы объявили dropdownItems как любой. Глядя на ваши данные, кажется, dropdownItems - это массив объектов, содержащих ключи name и link.

Вы можете разделить ваш интерфейс следующим образом. При использовании Typescript вы должны избегать использования любого тега, так как нет смысла использовать любой Typescript

import { IconName } from '@fortawesome/fontawesome-common-types';

export interface IDropdownItems {
  name: string;
  link: string;
}
export interface ITag {
  name: string;
  link: string;
  icon: IconName;
  dropdownItems: IDropdownItems[] | null;
  active: boolean;
}
export interface IMenuItem {
  index: number;
  tag: ITag;
  setVisible: (v: boolean) => void;
  visibleMenu: boolean;
  isOpen: boolean;
}

export const SideBarTags: ITag[] = [
  {
    name: "Tutoriais",
    link: "../tutorials",
    icon: "faFileAlt",
    dropdownItems: null,
    active: false
  },
  {
    name: "Avisos",
    link: "../news",
    icon: "faNewspaper",
    dropdownItems: null,
    active: false
  },
  {
    name: "Serviços",
    link: "../services",
    icon: "faMeteor",
    active: false,
    dropdownItems: [
      { name: "Elo Boost", link: "/eloBost" },
      { name: "Duo Boost", link: "/duoBoost" },
      { name: "MD10", link: "/eloBost" },
      { name: "Coaching", link: "/duoBoost" },
      { name: "Vitóriais", link: "/duoBoost" }
    ]
  },
  {
    name: "Carteira",
    link: "../cartcredit",
    icon: "faWallet",
    active: false,
    dropdownItems: [
      { name: "Histórico", link: "/history" },
      { name: "Adicionar Crédito", link: "/add" }
    ]
  }
];