打字稿在定义对象的类型定义时出错

Question

大家好，我有一个对象数组，比如 -

const routes = [
  {
    path: '/',
    exact: true,
    name: 'Home',
    component: Home,
    authRequired: false
  },
  {
    path: '/seguro-vida-credito/simulacao/:journeyId?',
    exact: true,
    name: 'MortgageJourney',
    component: MortageJourney,
    authRequired: true
  }
]

所以在我的组件中，首先我要为我的对象定义类型，比如

interface RouteType {
  path: string,
  exact: boolean,
  name: string,
  component: React.Component,
  authRequired: boolean,
  title?:string,
}

然后我想循环并渲染我的路线

export default function HandleRoutes() {
  return (
    <>
      {routes.map((route: RouteType) => {
        console.log(route)
        return route.authRequired ? (
          <ProtectedRoutes
            exact
            path={route.path}
            key={index}
            component={route.component}
            name={route.name}
            title={route.title}
          />
        ) : (
          <Route
            component={route.component}
            exact={route.exact}
            key={index}
            name={route.name}
            path={route.path}
            title={route.title}
          />
        )
      })}
    </>
  )
}

但是打字稿说我在地图功能上出错了

'(route: RouteType, index: number) => JSX.Element' 类型的参数是 不能分配给类型参数'（值：{路径：字符串；精确： 布尔值；名称：字符串；零件： LazyExoticComponent & Pick, 从不> & Pick<...>, 从不>>>;认证要求： 布尔值； } | { ...; }，索引：数字，数组：({ ...; } | { ...; })[]) => 埃尔...'。参数 'route' 和 'value' 的类型不兼容。 输入'{路径：字符串；精确：布尔值；名称：字符串；组件：LazyExoticComponent & Pick, 从不> & Pick<...>, 从不>>>;认证要求： 布尔值； } | { ...; }' 不可分配给类型 'RouteType'。 输入'{路径：字符串；精确：布尔值；名称：字符串；组件：React.LazyExoticComponent & Pick, 从不> & Pick<...>, 从不>>>;认证要求： 布尔值； }' 不可分配给类型 'RouteType'。 属性“组件”的类型不兼容。 类型 'ExoticComponent & Pick，从不> & Pick, never>> & { ...; }' 缺少以下内容 'Component' 类型的属性：上下文，setState， forceUpdate、render 和另外 3 个。

我可以知道它到底想说什么吗？我已经为我的路线定义了类型 谢谢

Answer 1

你可以只初始化数组的类型，使用ComponentType(accepts react class and function compoennt)代替Component

interface RouteType {
  path: string;
  exact: boolean;
  name: string;
  component: ComponentType;
  authRequired: boolean;
  title?: string;
}

const Test: FC = () => {
  return <div>Test</div>;
};

const routes:Array<RouteType> = [
  {
    path: "/",
    exact: true,
    name: "Home",
    component: Home,
    authRequired: false
  },
  {
    path: "/seguro-vida-credito/simulacao/:journeyId?",
    exact: true,
    name: "MortgageJourney",
    component: Home,
    authRequired: true
  }
];