使用Object.fromEntries时如何保留IDE自动补全功能？

要实现强类型的paths对象并支持IDE自动补全，核心是让TypeScript保留路由数组中id和path的字面量类型信息，具体操作如下：

1. 为路由数组添加as const断言 #

默认情况下，TypeScript会把routes里的id和path推断为宽泛的string类型，丢失具体的字面量信息。用as const可以强制TypeScript保留这些精确类型：

const routes = [
  {
    id: 'HOME',
    path: '/',
    element: <HomeRoute />
  },
  {
    id: 'ABOUT',
    path: '/about',
    element: <AboutRoute />
  },
] as const; // 关键：锁定字面量类型

2. 定义Paths类型 #

从路由数组的类型中提取id作为键、path作为对应值的类型：

type Paths = {
  [K in typeof routes[number]['id']]: Extract<typeof routes[number], { id: K }>['path']
};

3. 创建强类型的paths对象 #

用类型断言配合Object.fromEntries，让TypeScript识别出paths的具体类型：

const paths = Object.fromEntries(
  routes.map(r => [r.id, r.path])
) as Paths;

这样处理后，paths.HOME和paths.ABOUT会有完整的自动补全，且类型检查会严格对应各自的路径值。

简化写法（一步到位） #

如果不想单独定义Paths类型，也可以直接用内联类型推断简化：

const routes = [
  { id: 'HOME', path: '/', element: <HomeRoute /> },
  { id: 'ABOUT', path: '/about', element: <AboutRoute /> },
] as const;

const paths = Object.fromEntries(
  routes.map(r => [r.id, r.path])
) as { [K in typeof routes[number]['id']]: (typeof routes[number] & { id: K })['path'] };

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