Javascript react，typescript-无状态和正常组件的类型

我正在尝试实现一个

ProtectedRoute

组件，该组件具有

组件

属性-可以是无状态（纯）组件或普通组件

以下是我的类型：

export interface Props {
  isAuthenticated: boolean;
  component: React.PureComponent | React.Component;
  exact?: boolean;
  path: string;
}

这是我的ProtectedRoute组件：

import React from 'react';
import { Redirect, Route } from 'react-router-dom';

import { ROUTES } from '../../constants/routes';

import { Props } from './ProtectedRoute.types';

const ProtectedRoute = (props: Props) => {
  const { isAuthenticated, component: Component, ...rest } = props;
  return (
    <Route
      {...rest}
      children={props =>
        !isAuthenticated ? (
          <Redirect to={{ pathname: ROUTES.login, state: { from: props.location } }} />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

export default ProtectedRoute;

从“React”导入React；
从“react router dom”导入{Redirect，Route}；
从“../../constants/ROUTES”导入{ROUTES}；
从“/ProtectedRoute.types”导入{Props}；
const ProtectedRoute=（道具：道具）=>{
const{isAuthenticated，component:component，…rest}=props；
返回(
！我被认证了(
) : (
)
}
/>
);
};
导出默认的ProtectedRoute；

我在这里遇到以下错误：

类型错误：JSX元素类型“Component”没有任何构造 或者电话签名。TS2604

我就是这样使用它的：

import React from 'react';

import { Route, Switch } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';

import { ROUTES } from '../../constants/routes';

import Login from '../Login/Login';
const PlaceholderComponent = () => <div>This is where we will put content.</div>;
const NotFoundPlaceholder = () => <div>404 - Route not found.</div>;

const Routes = () => {
  return (
    <Switch>
      <Route exact path={ROUTES.login} component={Login} />
      {/* TODO protected route */}
      <ProtectedRoute exact path={ROUTES.list} component={PlaceholderComponent} />
      <ProtectedRoute exact path={ROUTES.procedure} component={PlaceholderComponent} />
      {/* catchall route for 404 */}
      <Route component={NotFoundPlaceholder} />
    </Switch>
  );
};

export default Routes;

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“/ProtectedRoute”导入ProtectedRoute；
从“../../constants/ROUTES”导入{ROUTES}；
从“../Login/Login”导入登录名；
const placeholder component=（）=>这是我们将放置内容的地方。；
const NotFoundPlaceholder=（）=>404-未找到路由。；
常数路由=（）=>{
返回(
{/*TODO受保护的路由*/}
{/*404*/}的catchall路由
);
};
导出默认路径；

并在此处获取以下错误：

类型“（）=>元素”不可分配给类型“PureComponent | Component”。类型“（）=>元素”缺少 “组件”类型的以下属性：上下文， 设置状态、强制更新、渲染和3个以上。[2322]

---

这使我认为我使用了不正确的类型定义。“正确”的方法是什么？我的目的是检查

ProtectedRoute

是否总是得到一个React组件，因为

组件
道具可能找到了它，但会将其打开，因为我不知道这是否是正确的解决方案：

export interface Props {
  isAuthenticated: boolean;
  component: React.ComponentClass<any> | React.StatelessComponent<any>;
  exact?: boolean;
  path: string;
}

导出接口道具{
未验证：布尔值；
组件：React.ComponentClass | React.statelementComponent；
精确？：布尔；
路径：字符串；
}
功能组件和类组件的类型都是
ComponentType

应该是：

export interface Props {
  isAuthenticated: boolean;
  component: React.ComponentType;
  exact?: boolean;
  path: string;
}

typescript标记如何链接到react主题？这毫无意义关于类型定义，这是一个来自typescript文件的typescript错误？“typescript是由Microsoft创建的JavaScript的类型超集”-我知道，该标记用于typescript语法，但在您的情况下，错误发生在您使用的库或包中。我认为最好指定lib/package的标记，而不是typescript。它是？