javascript - React Typescript 映射循环接口(interface)错误

Question

我正在尝试在 JavaScript 中连接一个 map 循环，我所做的是:

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

map 循环的代码是:

// 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

你能帮我理解这个问题吗？谢谢，F.

Answer 1

出现此错误的原因是 object[] 类型的 routes 参数无法转换为 RoutesType[] 类型。

TypeScript 尝试这种类型转换的原因是 routes 的类型被推断并预期为 RoutesType[]，因为 的类型>prop map 回调参数。

一个修复方法是像这样修改您的 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[]