TypeScript中通过函数参数推断路由对象键类型的报错问题

问题描述 #

我需要实现一个getRoutePath函数，接收路由类型（如user、auth）和对应routes属性的键作为参数，返回完整路由路径。当前函数已能正确推断参数类型，但内部访问ROUTES[type].routes[name].path时，TypeScript报错提示类型R无法索引联合类型。尝试用强类型替代satisfies会丢失参数推断，使用makeRoute函数也未能解决问题。

可行解决方案 #

方案1：添加精准类型断言 #

通过类型断言明确当前路由组的具体类型，让TypeScript能正确索引：

function getRoutePath<T extends keyof typeof ROUTES, R extends keyof typeof ROUTES[T]['routes']>(
  type: T,
  name: R
) {
  const routeGroup = ROUTES[type];
  // 断言routes为当前类型对应的路由集合
  const targetRoute = (routeGroup.routes as typeof ROUTES[T]['routes'])[name];
  return `${routeGroup.path}/${targetRoute.path}`;
}

方案2：利用分布式条件类型重构关联类型 #

提前定义路由类型与路由名称的关联关系，让类型推断更精准：

// 提取所有路由组类型
type AllRouteGroups = typeof ROUTES;
// 定义路由类型的联合类型
type RouteType = keyof AllRouteGroups;
// 定义路由类型对应的路由名称类型
type RouteName<T extends RouteType> = keyof AllRouteGroups[T]['routes'];

function getRoutePath<T extends RouteType>(type: T, name: RouteName<T>) {
  const group = AllRouteGroups[type];
  return `${group.path}/${group.routes[name].path}`;
}

方案3：自定义类型守卫做类型收窄 #

通过类型守卫函数明确当前路由组的类型，消除联合类型的歧义：

type RouteType = keyof typeof ROUTES;
type RouteGroup = typeof ROUTES[RouteType];

function isTargetRouteGroup<T extends RouteType>(
  type: T,
  group: RouteGroup
): group is typeof ROUTES[T] {
  return group.path === ROUTES[type].path;
}

function getRoutePath<T extends RouteType>(type: T, name: keyof typeof ROUTES[T]['routes']) {
  const group = ROUTES[type];
  if (isTargetRouteGroup(type, group)) {
    return `${group.path}/${group.routes[name].path}`;
  }
  throw new Error(`Invalid route type: ${type}`);
}

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