Vue项目中创建嵌套设备树的TypeScript类型错误排查

问题场景 #

在Vue项目中，需要将domain/family/member结构的设备列表整理为嵌套对象树，编写的TypeScript代码功能正常，但循环中的current变量触发类型错误。

代码示例 #

type Device = { name: string };
type Members = { [key: string]: Device };
type Families = { [key: string]: Members };
type Domains = { [key: string]: Families };

// 将设备分组以优化导航
const deviceTree: Ref<Domains> = computed(() => {
  const tree = devices.value.reduce((acc: Domains, device: string) => {
    const parts = device.split('/');
    let current = acc;

    for (const part of parts.slice(0, -1)) {
      current = current[part] = current[part] || {}; 
//    ^^^^^^^ : TypeScript错误见下方
    }

    current[parts[parts.length - 1]] = { name: device };
    return acc;
  }, {});

  return tree;
});

错误信息 #

Type 'Families' is not assignable to type 'Domains'.
  'string' index signatures are incompatible.
    Type 'Members' is not assignable to type 'Families'.
      'string' index signatures are incompatible.
        Type 'Device' is not assignable to type 'Members'.
          Property 'name' is incompatible with index signature.
            Type 'string' is not assignable to type 'Device'.

错误原因分析 #

1. 层级类型动态变化无法被推断
   你定义的是严格的三层嵌套类型：Domains（字符串索引对应Families）→Families（字符串索引对应Members）→Members（字符串索引对应Device），每一层的索引签名返回类型完全不同。但循环中current初始类型为Domains，第一次循环后会被赋值为current[part]（类型是Families），TypeScript无法自动识别current的类型会随循环层级动态降级，依然强制要求它保持Domains类型，直接触发类型不兼容报错。

2. 空对象的类型约束缺失
   reduce的初始值{}会被TypeScript推断为无类型约束的空对象，虽然你给acc标注了Domains类型，但current[part] || {}中的{}同样是无类型的空对象，无法匹配当前层级需要的Families或Members类型，进一步加剧了类型不匹配问题。

3. 最后一步赋值的类型冲突
   循环结束后，current的实际类型应该是Members（对应设备的父级层级），但TypeScript没有跟踪到这个类型变化，依然认为current是Domains类型，此时给current[parts[-1]]赋值Device类型对象，会和Domains的索引签名（要求返回Families）产生冲突。

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