将JS代码转为TS时遇类型错误：allowedRoles隐式'any'类型

这个错误是因为TypeScript无法推断allowedRoles的类型，默认视为any，而你的TS配置（通常是tsconfig.json里的noImplicitAny）禁止隐式any类型。解决方法是给组件props明确指定类型：

步骤1：确保Role类型已定义 #

如果还没定义Role枚举，先创建它：

export enum Role {
  USER = 'USER',
  GLOBAL_ADMIN = 'GLOBAL_ADMIN',
  CUSTOMER_ADMIN = 'CUSTOMER_ADMIN'
}

步骤2：给ProtectedRoutes的Props指定类型 #

修改ProtectedRoutes.tsx，添加类型定义：

import { useLocation, Navigate, Outlet } from 'react-router-dom';
import { Role } from './your-role-file-path'; // 替换为实际文件路径

// 定义组件props的类型接口
interface ProtectedRoutesProps {
  allowedRoles: Role[];
}

const ProtectedRoutes = ({ allowedRoles }: ProtectedRoutesProps) => {
  const location = useLocation();
  const _user = { roles: [Role.USER] };

  // 用some替代find，更适合判断数组是否包含指定元素
  const hasPermission = _user?.roles?.some(role => allowedRoles.includes(role));

  return (
    hasPermission
      ? <Outlet /> {/* 这里必须用Outlet渲染子路由内容，原代码的RootPage会导致子路由无法显示 */}
      : _user
        ? <Navigate to="/denied" state={{ from: location }} replace />
        : <Navigate to="/signin" state={{ from: location }} replace />
  );
};

export default ProtectedRoutes;

关键说明 #

• 给allowedRoles指定Role[]类型，明确它是Role枚举的数组，消除隐式any报错
• 原代码中返回<RootPage />是错误的，作为路由保护组件，应该用<Outlet />渲染匹配的子路由（比如Dashboard、Applications），否则子路由内容无法显示
• 使用Array.some()替代Array.find()，因为我们只需要判断用户角色是否在允许列表中，不需要返回具体元素，性能更优

内容的提问来源于stack exchange，提问作者Arun Kumar M