如何在TypeScript/JavaScript中不修改接口为JSON数据新增属性

方法1：创建新对象扩展属性（推荐） #

直接在map里返回包含原属性和新属性的新对象，TypeScript会自动推断出交叉类型，既不修改原接口，也能保持类型安全：

const modifiedData = this.data1.map(d => ({
  ...d,
  expanded1: false,
  expanded2: false
}));

此时modifiedData的类型会被推断为(Candle & {expanded1: boolean; expanded2: boolean})[]，后续访问新属性不会有类型报错。

方法2：类型断言修改原对象 #

如果需要直接修改原数组中的对象（而非创建新对象），可以用类型断言告诉TypeScript该对象允许包含新增属性：

const modifiedData = this.data1.map(d => {
  const candleWithExpanded = d as Candle & {expanded1: boolean; expanded2: boolean};
  candleWithExpanded.expanded1 = false;
  candleWithExpanded.expanded2 = false;
  return candleWithExpanded;
});

注意这种方式会改动原数组里的对象，若不想影响原始数据，优先选方法1。另外尽量避免用any断言，会丢失TypeScript的类型检查优势。

方法3：定义扩展接口 #

如果带新属性的类型需要在多处使用，可以定义一个继承自Candle的新接口（不修改原接口）：

interface CandleWithExpanded extends Candle {
  expanded1: boolean;
  expanded2: boolean;
}

// 然后在map中返回新对象并指定类型
const modifiedData: CandleWithExpanded[] = this.data1.map(d => ({
  ...d,
  expanded1: false,
  expanded2: false
}));

这种方式类型更清晰，适合复杂业务场景。

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