如何为 ReactRouter 的 PrivateRoute 添加 Typescript 接口？

Question

我正在使用 React Router v4 并创建了一个私有路由，如下所示：

const PrivateRoute = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={(props) => {
                return isUserLoggedIn() ? <Component {...props} /> : <Redirect to="/login" />;
            }}
        />
    );
};

并且是这样使用的：

<Switch>
  <Route path="/login" component={Login} />
  <PrivateRoute exact path="/" component={Home} />
  <PrivateRoute path="/vehicles" component={Vehicles} />
</Switch>

现在，我收到以下错误：

Binding element 'Component' implicitly has an 'any' type.

这是因为，我已经给出了 noImplicitAny 并且我没有为此 PrivateRoute 道具指定接口类型。

问题是，如何在此处为道具添加界面？

注意：特别是道具中的其余部分，我主要是在打字时感到困惑。

Answer 1

试试这个：

export interface PrivateRouteProps extends RouteProps  {
    component: Component;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    let { component: Component, ...rest } = props;
    return (
        <Route
            {...rest}
            render={(props) => {
                return isUserLoggedIn() ? <Component {...props} /> : <Redirect to="/login" />;
            }}
        />
    );
};

如何为 ReactRouter 的 PrivateRoute 添加 Typescript 接口？

How to add Typescript Interface for a ReactRouter's PrivateRoute?

reactjs

typescript

react-router

react-router-v4

react-props