如何从TypeScript路由结构中提取指定的具体联合类型？

你遇到的问题是TypeScript默认会把对象字面量的字符串属性宽化为string类型，而非保留具体的字面量值。要拿到目标联合类型，有两种实用的解决方式：

方法一：使用as const断言（推荐） #

给routes数组加上as const，让TypeScript强制推断每个属性为最窄的字面量类型，而非宽泛的string：

const routes = [
  {
    path: '/:token',
    component: PLayout,
    children: [
      {
        path: 'institutions',
        name: 'display_information',
        component: InstitutionsView
      },
      {
        path: 'credentials',
        name: 'display_credentials',
        component: CredentialsView
      },
      {
        path: 'token',
        name: 'display_token',
        component: TokenView
      }
    ]
  }
] as const; // 关键：添加as const断言

type RoutesPath = typeof routes[number]['children'][number]['path'];
// 此时RoutesPath的类型就是：'institutions' | 'credentials' | 'token'

as const会让整个路由结构变成只读，同时把所有字符串、数字等值锁定为字面量类型，完全满足你的需求。

方法二：显式定义路由类型约束 #

如果需要保持routes可修改（不希望只读），可以提前定义子路由的类型，显式指定path的可选值：

// 先定义子路由的类型，锁定path的可选值
type ChildRoute = {
  path: 'institutions' | 'credentials' | 'token';
  name: string;
  component: typeof InstitutionsView | typeof CredentialsView | typeof TokenView; // 换成实际组件类型
};

// 用定义好的类型约束routes数组
const routes: Array<{
  path: string;
  component: typeof PLayout;
  children: ChildRoute[];
}> = [
  {
    path: '/:token',
    component: PLayout,
    children: [
      {
        path: 'institutions',
        name: 'display_information',
        component: InstitutionsView
      },
      {
        path: 'credentials',
        name: 'display_credentials',
        component: CredentialsView
      },
      {
        path: 'token',
        name: 'display_token',
        component: TokenView
      }
    ]
  }
];

type RoutesPath = ChildRoute['path'];
// 同样得到目标联合类型

这种方式需要提前写死path的可选值，但好处是路由结构更明确，且routes仍可修改。

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