TypeScript中const断言数组扁平化类型关联错误问题求助

问题根源 #

你直接使用${(typeof subPackages)[number]['root']}/${(typeof subPackages)[number]['pages'][number]['path']}的写法，本质是取了所有root的联合类型和所有path的联合类型进行拼接，TypeScript会自动生成两者的笛卡尔积交叉组合，这就是不同子项属性混淆的原因。

解决方案：用分布式条件类型绑定子项属性 #

要让每个子包的root只和自身的pages.path拼接，需要通过分布式条件类型逐个处理数组中的每个子项，把单个子项的root和它内部的path绑定后再生成联合类型。

步骤1：定义原始数据（示例） #

假设你的subPackages是这样用const断言定义的：

const subPackages = [
  {
    root: 'packageA',
    pages: [
      { path: 'page1' },
      { path: 'page2' }
    ]
  },
  {
    root: 'packageB',
    pages: [
      { path: 'pageX' },
      { path: 'pageY' }
    ]
  }
] as const;

步骤2：定义正确的类型 #

// 提取单个子包的类型
type SingleSubPackage = typeof subPackages[number];

// 针对单个子包，绑定root和自身pages的path
type SubPackagePath<T extends SingleSubPackage> = 
  T extends { root: infer Root; pages: readonly { path: infer Path }[] }
    ? `${Root}/${Path}`
    : never;

// 生成最终的联合类型
type SubPackagesPaths = SubPackagePath<SingleSubPackage>;

验证效果 #

此时SubPackagesPaths的类型是：

"packageA/page1" | "packageA/page2" | "packageB/pageX" | "packageB/pageY"

测试代码：

const validPath: SubPackagesPaths = 'packageA/page1'; // 正常通过
const invalidPath: SubPackagesPaths = 'packageA/pageX'; // 类型报错，符合预期

原理说明 #

当泛型T是联合类型（这里SingleSubPackage是两个子包类型的联合）时，TypeScript的条件类型会自动分布式处理：即对联合类型中的每个子类型单独应用条件逻辑，最后把结果重新组合成联合类型。这样就保证了每个子包的root只会和自己的pages.path拼接，不会出现跨子项的交叉组合。

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