Properties in a model class in typescript that share common characteristics

Question

Properties in a model class in typescript that share common characteristics

I need a data model class that can store identical information for two individuals simultaneously. For instance:

export class People {
    constructor(
        public person1Name: string = '',
        public person1Age: number = 0,
        public person1Game: string = '',
        
        public person2Name: string = '',
        public person2Age: number = 0,
        public person2Game: string ='',
    ){}
}

This class holds the same details (name, age, game) for two people.
Although I could use a generic person model class, the issue is that I always receive precisely two sets of individual's information from an Angular service to the component.
With a generic person class, I would have to pass an array of objects like:

Array: [person1, person2]

In such a scenario, it would be challenging to handle in both the service and the component since I utilize the information differently.
More importantly, I transmit details of two individuals from the service through an observable.

Therefore, my question is, is it possible to create a model class that captures the same information for two individuals as illustrated above? as I prefer to avoid using an array of objects..
Thank you in advance.

angular typescript model data-modeling datamodel

Answer 1

Answer №1

An example of using an interface to define a data type for individuals without actually creating instances.

export interface Individual {
  id: string;
  name: string;
  age: number;
  interest: string;
}

Here is a simplified demonstration:

@Component({...})
export class SampleComponent implement OnInit {
  individuals: Individual[] = []; // initialize an empty array

  constructor(private dataService: DataService) {}
 
  ngOnInit(): void {
    const person1 = this.createIndividual('Alice Smith', 30, 'Reading');
    const person2 = this.createIndividual('Bob Johnson', 25, 'Gaming');

    this.individuals = [person1, person2]; // add individuals as needed

    this.dataService.sendIndividuals(this.individuals).subscribe((response) => {
        response.forEach(person => console.log('Received Person:', person));
    })
  }

  createIndividual(name: string, age: number, interest: string): Individual {
    return {
      id: 'unique-id-for-each-person',
      name,
      age,
      interest
    };
  }
}

@Injectable({...})
export class DataService {
   constructor(private http: HttpClient) {}
  
   sendIndividuals(individuals: Individual[]): Observable<Individual[]> {
     return this.http.post<Individual[]>('endpoint', individuals).pipe(
        map(response => // perform operations on response)
     );
   }
}

Answer 2

An example of using an interface to define a data type for individuals without actually creating instances.

export interface Individual {
  id: string;
  name: string;
  age: number;
  interest: string;
}

Here is a simplified demonstration:

@Component({...})
export class SampleComponent implement OnInit {
  individuals: Individual[] = []; // initialize an empty array

  constructor(private dataService: DataService) {}
 
  ngOnInit(): void {
    const person1 = this.createIndividual('Alice Smith', 30, 'Reading');
    const person2 = this.createIndividual('Bob Johnson', 25, 'Gaming');

    this.individuals = [person1, person2]; // add individuals as needed

    this.dataService.sendIndividuals(this.individuals).subscribe((response) => {
        response.forEach(person => console.log('Received Person:', person));
    })
  }

  createIndividual(name: string, age: number, interest: string): Individual {
    return {
      id: 'unique-id-for-each-person',
      name,
      age,
      interest
    };
  }
}

@Injectable({...})
export class DataService {
   constructor(private http: HttpClient) {}
  
   sendIndividuals(individuals: Individual[]): Observable<Individual[]> {
     return this.http.post<Individual[]>('endpoint', individuals).pipe(
        map(response => // perform operations on response)
     );
   }
}

Properties in a model class in typescript that share common characteristics

Answer №1

Similar questions

Simple steps to make an Angular Material mat-card expand to full screen

What methods are available to pass a variable value between two components in Angular 2?

Angular2 - Unresolved Promise error: ViewContainerRef provider not found in dynamic template

Is it possible to swap images by clicking on them?

Splitting Ngrx actions for individual items into multiple actions

Angular 6: Sending Back HTTP Headers

Utilizing a d.ts Typescript Definition file for enhanced javascript intellisene within projects not using Typescript

What is the best way to create a type guard for a path containing a dynamic field

Ways to transmit information or notifications from a service to a component

Angular Material: Setting the Sidenav/Drawer to Automatically Open by Default

Using TypeScript with React: Automatically infer the prop type from a generic parameter

Leverage tsconfig.json for TypeScript compilation in Vim using the Syntastic plugin

The input tag loses focus after its value is updated using a class method in Angular 8.x

When a Discriminated Union in Typescript includes a value in a function parameter, it resolves to 'any'

Issue with TranslateModule Configuration malfunctioning

What is the best way to first identify and listen for changes in a form

Replace i18next property type in React for language setting

When using Next.js or Express, a TypeScript project will seamlessly integrate as a local dependency during runtime or when building

Error encountered: The property 'localStorage' is not found on the 'Global' type

Developing a project using npm and Node.js with Typescript has been smooth sailing so far. However, an issue has arisen