Typescript 如何在具有嵌套数组的接口中允许新属性

Assumption:个

假设this.myService.get()返回Observable<MyInterface>.

DataExtended类型有一个问题，因为您将Data(由{ prop1: string; prop2: string }类型组成的数组)与对象{ newValue: string }组合在一起.

正确的类型应该是:

type DataExtended = Data &
  {
    newValue: string;
  }[];

用于现有类型.

或者，您应该将Data定义为单个对象而不是数组类型.

New types:个

type Data = { prop1: string; prop2: string };

interface MyInterface {
  prop1: string;
  data: Data[];
}

type DataExtended = Data &
  {
    newValue: string;
  };

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

对于使用map RxJS运算符转换数据，您可以通过以下方式实现:

Solution 1 with existing types:个

this.myData$ = this.myService.get()
  .pipe(
    map((response: any) => {
      let newResponse: MyInterfaceExtended = response;

      newResponse.data = newResponse.data.map((x) => ({
        ...x,
        newValue: 'new',
      }));

      return newResponse;
    })
  );

Solution 2 with the new types:

this.myData$ = this.myService.get()
  .pipe(
    map(
      (response: any) =>
        ({
          data: response.data.map(
            (x: Data) =>
              ({
                ...x,
                newValue: 'new',
              } as DataExtended)
          ),
        } as MyInterfaceExtended)
    )
  );

Demo @ StackBlitz个