TypeScript路由类型推断失效原因及无显式声明解决方法

首先，咱们拆解一下问题：先搞清楚router1的类型为什么会退化为any，再聊聊不用显式加类型参数的解决办法。

为什么类型会推断成any？ #

你的createRouter函数最初是这样定义的：

export function createRouter<State>(routes: Routes<State>): Router<State> { /* ... */ }

核心问题出在TypeScript的反向类型推断局限性：

Routes<State>是一个映射类型，它把State的每个属性Tag转换成Route<State[Tag]>。当你传入{root, blog}这个对象时，TypeScript需要做一次“反向推导”——从每个Route<Args>实例，反推出Args的具体类型，再把这些Args组合成State。

但TypeScript的类型推断引擎更擅长正向推导（从输入类型推导泛型），这种“从泛型的映射结果反向推导泛型本身”的场景，它没办法自动完成精确推断。因为Route接口里的match和build方法的参数/返回值依赖于Args，TypeScript找不到明确的“线索”来确定Args的具体结构，只能退而求其次，把State的属性推断为any兜底。

简单说：你让TypeScript“猜”State是什么，但给的线索是映射后的Routes<State>，它猜不出来，就用any凑数了。

无需显式加类型的解决办法 #

我们可以调整createRouter的泛型定义，把推断方向反过来：先让TypeScript推断出传入的路由对象的具体类型，再从中提取每个路由的Args来构建State。

修改后的代码： #

// 辅助类型：从Route实例中提取对应的Args类型
type RouteArgs<R> = R extends Route<infer A> ? A : never;

// 重新定义createRouter：先推断路由对象的类型T，再自动推导State
export function createRouter<T extends Record<string, Route<any>>>(routes: T): Router<{[K in keyof T]: RouteArgs<T[K]>}> {
  // 你的路由匹配/构建逻辑...
  return {} as any;
}

现在再调用const router1 = createRouter({ root, blog });，TypeScript会：

1. 先推断T为{root: Route<{}>, blog: Route<{id: string}>}；
2. 通过RouteArgs这个条件类型，把每个Route实例对应的Args提取出来；
3. 最终构建出State类型为{root: {}, blog: {id: string}}，router1的类型就会是Router<{root: {}, blog: {id: string}}>，完全符合你的预期。

原理说明： #

这个修改把泛型的推断方向从“反向推导State”改成了“正向推导路由对象类型T”，再从T中提取需要的信息。TypeScript对这种正向推断非常擅长，它能直接从你传入的root和blog实例中获取到它们的Route<Args>类型，再通过infer关键字提取出Args，最终组合成正确的State。

总结 #

• 原问题的本质是反向类型推断的局限性：TypeScript无法从Routes<State>映射类型反向推导State的具体结构，只能用any兜底；
• 调整泛型推断方向，先推断输入的路由对象类型，再从中提取Args，就能实现无需显式加类型参数的类型安全推导。

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