Guide on enabling a new property within an Interface containing a nested array

Question

Guide on enabling a new property within an Interface containing a nested array

Within my interface, there is a property named data which contains an array. The structure looks like this:

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

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

Now, I have an RxJS stream where the type is MyInterface.

I want to modify the data property slightly by adding a new value.

type DataExtended = Data & {
  newValue: string
}

This new type is added to an extended interface.

interface MyInterfaceExtended extends MyInterface {
  data: DataExtended
}

In the controller, I invoke a service that expects an HTTP result of type MyInterface. However, I need to alter the data structure as follows:

var myData$ = Observable<MyInterfaceExtended>;

constructor(private myService:myservice){
  this.myData$ = this.myService.get().pipe((map(value)) => {
      foreach(value.data,  (data) =>{
        data.newValue = 'new';
      })
      return value
  })
}

Despite this setup, I am encountering an error stating:

'newValue' does not exist on type {etc}

What could be causing this issue?

angular typescript types rxjs

Answer 1

Answer №1

Premise:

Let's assume that the this.myService.get() function returns Observable<MyInterface>.

An issue arises with the DataExtended type when combining the array of Data, which consists of { prop1: string; prop2: string }, with an object { newValue: string }.

The correct type should be as follows:

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

for existing data types.

Alternatively, you can define the Data as a single object instead of an array type.

New data types:

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

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

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

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

To convert the data using the RxJS operator map, you can use the following solutions:

Existing data types - Solution 1:

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

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

      return newResponse;
    })
  );

New data types - Solution 2:

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

Demo @ StackBlitz

Answer 2

Premise:

Let's assume that the this.myService.get() function returns Observable<MyInterface>.

An issue arises with the DataExtended type when combining the array of Data, which consists of { prop1: string; prop2: string }, with an object { newValue: string }.

The correct type should be as follows:

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

for existing data types.

Alternatively, you can define the Data as a single object instead of an array type.

New data types:

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

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

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

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

To convert the data using the RxJS operator map, you can use the following solutions:

Existing data types - Solution 1:

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

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

      return newResponse;
    })
  );

New data types - Solution 2:

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

Demo @ StackBlitz

Answer 3

Answer №2

Learn how to design universal interfaces.



interface BasicUserDetails<ID = number> {
  id: ID;
  firstName: string;
  lastName: string;
}

interface UserWithContacts extends BasicUserDetails<number> {
  phone: string;
}

interface CustomUser<UserDetail> {
  details: UserDetail;
}

const basicUser: CustomUser<BasicUserDetails> = {
  details: {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
  },
};

const userWithContact: CustomUser<UserWithContacts> = {
  details: {
    id: 1,
    firstName: 'Jane',
    lastName: 'Smith',
    phone: '123-456-7890',
  },
};

A Different Scenario



interface BaseEntity<Identity> {
  id: Identity;
}

interface SelectFieldByID<Type, Key extends keyof Type = keyof Type> {
  idKey: Key;
}

interface UserEntityData
  extends BaseEntity<number>,
    SelectFieldByID<UserEntityData, 'uuid' | 'username'> {
  uuid: string;
  username: string;
  password: string;
}

Answer 4

Learn how to design universal interfaces.



interface BasicUserDetails<ID = number> {
  id: ID;
  firstName: string;
  lastName: string;
}

interface UserWithContacts extends BasicUserDetails<number> {
  phone: string;
}

interface CustomUser<UserDetail> {
  details: UserDetail;
}

const basicUser: CustomUser<BasicUserDetails> = {
  details: {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
  },
};

const userWithContact: CustomUser<UserWithContacts> = {
  details: {
    id: 1,
    firstName: 'Jane',
    lastName: 'Smith',
    phone: '123-456-7890',
  },
};

A Different Scenario



interface BaseEntity<Identity> {
  id: Identity;
}

interface SelectFieldByID<Type, Key extends keyof Type = keyof Type> {
  idKey: Key;
}

interface UserEntityData
  extends BaseEntity<number>,
    SelectFieldByID<UserEntityData, 'uuid' | 'username'> {
  uuid: string;
  username: string;
  password: string;
}

Guide on enabling a new property within an Interface containing a nested array

Answer №1

Answer №2

Learn how to design universal interfaces.

A Different Scenario

Similar questions

Declaring global types in a NX and NextJS monorepository for enhanced development consistency

Utilizing a service within NestJS

Is it possible to implement a different termination condition when using *ngFor in Angular 2?

Angular keeping track of the variable data with each click event

I encountered a TS error warning about a possible null value, despite already confirming that the value

Angular checkboxes not updating with current values when submitted

Error in NextJS with TypeScript when updating data in a useState variable

Guide on setting up factories with pre-existing relationships in MIKRO-ORM

Vite: What steps can be taken to verify the TypeScript configuration of a React application when typechecking suddenly fails across the entire project?

Modify just one feature of ReplaySubject

Tips on how to modify the session type in session callback within Next-auth while utilizing Typescript

Tips on rotating a material-ui icon

Evolution of Angular: Migrating from Angular 1 to Angular 5 with Nested Component

Remove Fragment in Angular Routing after navigating to a different route

Utilize ngFor within a ng-template to display dynamic content in a table structure

Rule of authentication using Firebase Database

Array of React components with covariant types

Exploring the depths: Retrieving nested object attributes using ngFor

Filtering in RxJS pipelines can be compared to an if-else statement

Angular 5 project encounters a 404 error while attempting to send a delete request to a .net web API