TypeScript接口属性同时支持嵌套/非嵌套类型时报错如何解决

TypeScript 对带索引签名的接口有强制约束：所有具名声明的属性类型，必须完全兼容字符串索引签名的返回值类型。
你的代码里触发报错的逻辑很明确：

• 顶层索引签名限定了所有字符串键的返回值只能是number | string | Sample_interface[]三类
• 但你声明的data属性是{ [key: string]: Sample_interface[] }类型的嵌套对象，这个类型不在索引签名允许的返回值范围内，类型系统直接判定不兼容。

只需要把你需要支持的嵌套对象类型，补充到顶层索引签名的联合类型范围内即可，同时可以把公共值类型抽离成别名简化书写，避免重复代码。

修正后代码 #

interface Sample_interface {
  sample_var1?: number;
  sample_var2?: number;
  // 其余业务属性
}

// 抽离所有可能的属性值类型，方便复用
type DataFieldValue = 
  | number 
  | string 
  | Sample_interface[] 
  | { [key: string]: Sample_interface[] };

interface Data {
  // data属性支持你要的字符串、嵌套对象两类，同时兼容其余值类型
  data: DataFieldValue;
  // 索引签名覆盖所有值类型，和具名属性类型完全兼容
  [key: string]: DataFieldValue;
}

类型校验效果 #

修复后以下两种场景都能正常通过校验，满足同时支持嵌套、非嵌套类型的需求：

• 非嵌套场景：data为普通字符串/数字/样本数组

  const nonNestedData: Data = {
    data: "2024-06-01",
    count: 100,
    list: [{ sample_var1: 1, sample_var2: 2 }]
  };
  

• 嵌套场景：data为键是字符串、值是样本数组的对象

  const nestedData: Data = {
    data: {
      groupA: [{ sample_var1: 1 }],
      groupB: [{ sample_var2: 3 }]
    },
    remark: "分组数据"
  };
  

注意：如果后续需要新增支持的属性值类型，只需要在DataFieldValue联合类型里补充即可，不需要同时修改接口内的多处类型定义。

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