以打字稿友好的方式编写 PrivateRoute 组件

Question

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

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

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

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

但是我的打字稿编译器不喜欢上面的代码

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":

我如何修改上面的这段代码，使其变得对打字稿友好？

Answer 1

我用这段代码来模仿路线：

export const PrivateRoute = ({ component, ...rest }: RouteProps) => {
  if (!component) {
    throw Error("component is undefined");
  }

  const Component = component; // JSX Elements have to be uppercase.
  const render = (props: RouteComponentProps<any>): React.ReactNode => {
    if (fakeAuth.isAuthenticated) {
      return <Component {...props} />;
    }
    return <Redirect to={{ pathname: '/login' }} />
  };

  return (<Route {...rest} render={render} />);
}

Route 的原始定义是Route<T extends RouteProps = RouteProps> extends React.Component<T, any>，但是对于Typescript 2.9，目前无法在泛型的第一行使用扩展运算符，这就是为什么使用通用的RouteProps 类型。

Answer 2

renaming destructured properties 有一个 Typescript 语法。

在构建私有路由时，是这样的：

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

以打字稿友好的方式编写 PrivateRoute 组件

Write PrivateRoute Component in a typescript friendly way

typescript

react-router-v4