如何为React Router v4的PrivateRoute添加TypeScript接口？

我来帮你搞定这个TypeScript类型定义的问题！下面是一步步的实现方案：

1. 导入必要的类型 #

首先，确保你已经导入了React Router和React的相关类型：

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

2. 定义PrivateRoute的Props接口 #

我们需要创建一个接口来约束PrivateRoute接收的属性。因为PrivateRoute本质上是对Route组件的封装，所以我们可以继承RouteProps，同时明确我们需要的component属性类型：

// 继承RouteProps，同时移除原有的component和render属性（避免冲突）
interface PrivateRouteProps extends Omit<RouteProps, 'component' | 'render'> {
  // 指定component可以是类组件或函数组件，并且能接收路由相关的props
  component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
}

这里用Omit是因为RouteProps本身已经包含了component和render属性，但我们的PrivateRoute只需要接收component，所以把这两个属性排除后重新定义，避免类型冲突。

3. 为PrivateRoute添加类型约束 #

现在修改你的PrivateRoute组件，用上刚才定义的接口：

// 给props加上PrivateRouteProps类型约束
const PrivateRoute = ({ component: Component, ...rest }: PrivateRouteProps) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        // 这里假设isUserLoggedIn是你的登录状态判断函数，记得给它也加上返回值类型
        return isUserLoggedIn() ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
};

// 给isUserLoggedIn添加类型示例
const isUserLoggedIn = (): boolean => {
  // 你的登录判断逻辑，比如检查localStorage、redux状态等
  return !!localStorage.getItem('authToken');
};

4. 使用带类型的PrivateRoute #

现在你原来的Switch用法就会自动获得类型提示，不会出现类型错误了：

// 假设Login、Home、Vehicles组件已经定义
<Switch>
  <Route path="/login" component={Login} />
  <PrivateRoute exact path="/" component={Home} />
  <PrivateRoute path="/vehicles" component={Vehicles} />
</Switch>

这样一来，你的PrivateRoute就完全具备了TypeScript的类型检查能力，不管是传入的路由路径、组件还是其他Route相关属性，都会得到类型提示和校验。

内容的提问来源于stack exchange，提问作者Ivin