Реагировать Ошибка интерфейса цикла карты Typescript

Question

Я пытаюсь связать цикл карты в JavaScript, что я сделал:

interface RoutesType {
  path: string;
  name: string;
  icon: string;
  layout: string;
}

код цикла карты:

// creates the links that appear in the left menu / Sidebar
  const createLinks = (routes: object[]) => {
    return routes.map((prop: RoutesType, key: number) => {
      return (
        <NavItem key={key}>
          <NavLink to={prop.layout + prop.path} tag={NavLinkRRD} onClick={closeCollapse} activeClassName="active">
            <i className={prop.icon} />
            {prop.name}
          </NavLink>
        </NavItem>
      );
    });
  };

Ошибка, которую я не могуЯ понимаю, что следующее

TypeScript error: Argument of type '(prop: RoutesType, key: number) => Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
  Types of parameters 'prop' and 'value' are incompatible.
    Type '{}' is missing the following properties from type 'RoutesType': path, name, icon, layout

Не могли бы вы помочь мне разобраться в этой проблеме? Спасибо, Ф.

Answer 1

Причина этой ошибки в том, что аргумент routes типа object[] не может быть приведен к типу RoutesType[].

Причина, по которой TypeScript пытается выполнить приведение типа, заключается в том, что этот типиз routes выводится и, как ожидается, будет RoutesType[] из-за типа аргумента prop в обратном вызове карты.

Исправление будет состоять в том, чтобы пересмотреть сигнатуру вашей createLinks функции следующим образом:

 /* Update routes to RoutesType[] */
 const createLinks = (routes: RoutesType[]) => {
    return routes.map((prop: RoutesType, key: number) => {
      return (
        <NavItem key={key}>
          <NavLink to={prop.layout + prop.path} tag={NavLinkRRD} 
                   onClick={closeCollapse} activeClassName="active">
            <i className={prop.icon} />
            {prop.name}
          </NavLink>
        </NavItem>
      );
    });
  };

Это изменение потребует, чтобы все вызовы createLink по всему вашему проекту определяли значение routes, которое строго набрано RoutesType[]