如何为包含嵌套数组的TypeScript接口添加新属性？

先还原你的代码场景（方便理解问题）：

interface Data {
  prop1: string;
  prop2: string;
}

interface MyInterface {
  data: Data[];
}

interface DataExtended extends Data {
  newValue: string;
}

interface MyInterfaceExtended extends MyInterface {
  data: DataExtended[];
}

// 你的RxJS数据流
const source$: Observable<MyInterface> = of({
  data: [{ prop1: 'a', prop2: 'b' }]
});

// 触发报错的代码
source$.pipe(
  map(item => {
    item.data.forEach(d => {
      d.newValue = 'test'; // 错误：'newValue' 不存在于类型 'Data' 上
    });
    return item;
  })
);

报错的核心原因 #

1. 静态类型约束限制：原数据流的类型是Observable<MyInterface>，其中data数组的元素被TypeScript严格限定为Data类型——而Data并没有定义newValue属性，直接赋值违反了类型规则。
2. 接口继承仅为类型声明，不自动转换实例：你定义的MyInterfaceExtended只是一个类型层面的声明，并不会自动把原数据流中MyInterface类型的实例转换成MyInterfaceExtended类型。TypeScript不会因为你声明了继承接口，就放宽对原实例的类型检查。
3. 类型安全机制的保护：TypeScript的静态检查会阻止这种“给原类型添加未声明属性”的操作，避免出现类型不一致的潜在问题。

可行的解决方法 #

方法一：使用类型断言明确转换

直接通过类型断言告诉TypeScript，当前元素可以被当作DataExtended类型处理：

source$.pipe(
  map(item => {
    // 把整个item断言为扩展后的接口类型
    const extendedItem = item as MyInterfaceExtended;
    extendedItem.data.forEach(d => {
      d.newValue = 'test';
    });
    return extendedItem;
  })
);

// 或者仅针对单个元素断言
source$.pipe(
  map(item => {
    item.data.forEach(d => {
      (d as DataExtended).newValue = 'test';
    });
    return item as MyInterfaceExtended;
  })
);

方法二：创建新对象（遵循不可变数据原则）

不直接修改原数组元素，而是生成包含新属性的新对象，同时更新整个data数组的类型：

source$.pipe(
  map(item => ({
    ...item,
    data: item.data.map(d => ({
      ...d,
      newValue: 'test'
    })) as DataExtended[]
  })) as OperatorFunction<MyInterface, MyInterfaceExtended>
);

方法三：使用类型守卫（严谨场景）

如果需要更严谨的类型检查，可以定义类型守卫函数来确保操作的安全性：

function isDataExtended(d: Data): d is DataExtended {
  return 'newValue' in d;
}

source$.pipe(
  map(item => {
    item.data.forEach(d => {
      if (!isDataExtended(d)) {
        (d as DataExtended).newValue = 'test';
      }
    });
    return item as MyInterfaceExtended;
  })
);

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