TypeScript接口继承报错：如何定义可迭代的JSON合规接口？

算力阿峰

2026-7-19

解决方法

你遇到的报错是因为TypeScript不允许接口直接继承仅包含索引签名的接口。结合你的需求（JSON兼容、可迭代、可被类实现、自定义属性规范），可以通过以下方式解决：

1. 修正JSON类型定义，贴合实际序列化规则

JSON本身不支持undefined，序列化时会自动忽略这类属性，所以先调整基础类型：

type JsonValue = string | number | boolean | null | JsonValue[] | JsonObject;

2. 定义兼容的自定义接口

有两种可行的写法：

写法一：在自定义接口中同时声明特定属性和索引签名

这种方式避开接口继承的限制，直接在接口内包含索引签名和自定义属性：

interface JsonObject {
  [key: string]: JsonValue;
}

interface IFoo {
  // 自定义必填属性，类型符合JsonValue
  p1: string;
  p2: number;
  // 索引签名，允许任意额外的JSON兼容属性
  [key: string]: JsonValue;
}

写法二：用类型别名作为基础，接口扩展它

把基础JSON对象定义为类型别名，接口可以正常扩展：

type JsonObject = { [key: string]: JsonValue };

interface IFoo extends JsonObject {
  p1: string;
  p2: number;
}

3. 类实现接口

两种写法的接口都可以被类实现，注意要同时实现特定属性和索引签名：

class Foo implements IFoo {
  p1: string;
  p2: number;
  [key: string]: JsonValue;

  constructor(p1: string, p2: number) {
    this.p1 = p1;
    this.p2 = p2;
  }
}

4. 迭代与序列化操作

迭代：借助索引签名，可用for...in、Object.keys()等方式遍历属性：

const foo = new Foo("demo", 456);
for (const key of Object.keys(foo)) {
  console.log(`${key}: ${foo[key]}`);
}

序列化：所有属性类型均为JSON兼容，直接用JSON.stringify()即可，反序列化后通过类型断言转回对应接口：
```
const json = JSON.stringify(foo);
const parsedFoo = JSON.parse(json) as IFoo;
```

额外说明

如果需要可选属性，可在接口中用?标记（如p3?: string），序列化时未赋值的可选属性会被自动忽略，不影响JSON规范。
索引签名确保了接口可以动态添加任意符合JSON类型的属性，同时保留了自定义属性的类型检查。

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