typescript - 以 typescript 友好的方式编写 PrivateRoute 组件

Question

我正在学习在 Typescript 中使用 React Router。我也在阅读这篇关于如何在 typescript+react 路由器中实现 PrivateRoutes 的文章。

https://tylermcginnis.com/react-router-protected-routes-authentication/

上面的博客有一个代码段来实现PrivateRoute as

const PrivateRoute = ({component: Component, ...rest}) => (
   <Route {...rest} render={(props) => (
      isLoggedIn.isAuthenticated === true ? <Component {...props} /> : <Redirect to='/login' />
   )} />
)

但是我的 typescript 编译器不喜欢上面的代码

ERROR in [at-loader] ./src/components/Main.tsx:19:35
    TS7031: Binding element 'Component' implicitly has an 'any' type.
Child html-webpack-plugin for "index.html":

如何修改上面的代码，使其变得对 typescript 友好？

Answer 1

renaming destructured properties 有一个 Typescript 语法.

在构建私有(private)路由时，是这样的:

const PrivateRoute = ({component: Component, ...rest}: {component: any}) => (
    ...
)