How do I create an array to store array elements of different data types (different interfaces)?

Question

I have a question about 2D arrays in typescript.

I want to create an array containing arrays where each element has a different data type, but the data types of these elements are all different interfaces.

As you can see in the figure, the four variables (elements) that will be included in the 'answer' variable are member, publication, research, and courses in turn. These consist of a Member[ ] interface, a Publication[ ] interface, a Research[ ] interface, and a Course[ ] interface, respectively.

this.answer = [this.member,this.publication,this.research,this.course]; I tried the same way as , but it didn't work the way I wanted it to. How can I store variables with different interface characteristics in 'this.answer' variable?

As a result of experimentation, elements such as 'this.member' have values ​​well, but there seems to be a problem in the process of putting these elements into 'this.answer'.

Thank you!

import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject, Observable } from 'rxjs';
import { MemberService } from 'src/app/services/member.service';
import { Member } from 'src/app/models/member';
import { PublicationService } from 'src/app/services/publication.service';
import { Publication } from 'src/app/models/publication';
import { ResearchService } from 'src/app/services/research.service';
import { Research } from 'src/app/models/research'; 
import { CourseService } from 'src/app/services/course.service';
import { Course } from 'src/app/models/course';

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.scss']
})

export class SurveyComponent implements OnInit {

  //member.component.ts에서 modalRef.componentInstance.renderPage = page; 를 통해 전달된 renderPage 변수를 받아옴!
  //renderPage 변수에는 (member/publication/research/course/event/banner) 중 하나가 들어있다.
  //이 변수의 값에 따라서, Survey 컴포넌트의 html 파일을 조금씩 다르게 보여줘야 한다.

 @Input() public renderPage;

  array1 : string[] = ['member','publication','research','course','event','banner'];
  answer;
  ren;

  member : Member[]=[];
  publication :Publication[]=[];
  research : Research[]=[];
  course : Course[]=[];
  
  constructor(
    public modal: NgbActiveModal,
    private ms: MemberService, 
    private ps: PublicationService, 
    private rs: ResearchService, 
    private cs: CourseService) { 

    this.renderPage = this.renderPage;
  }


  ngOnInit(): void {

    this.ms.getAll().subscribe(member => {
      this.member = member.sort((a, b) => a.index - b.index);
    });
    this.ps.getAll().subscribe(publication => {
      this.publication = publication.sort((a, b) => a.id - b.id);
    });
    this.rs.getAll().subscribe(research => {
      this.research = research.sort((a, b) => a.id - b.id);
    });
    this.cs.getAll().subscribe(course => {
      this.course = course.sort((a, b) => a.id - b.id);
    });

    //I have a problem in this code..!!
    this.answer = [this.member,this.publication,this.research,this.course]; 
    
    //this.answer1.forEach((element,idx)=>console.log(idx+ '||'+ element));

    this.array1.forEach(
      (element, idx) => {
        if(element === this.renderPage){
          this.ren = this.answer[idx];
        }
      }
    );
  }
  
}

The four different interfaces look like this. Variables within an interface are all different for each interface.

export interface Member {
  id: number;
  name: string;
  role: string;
  degree: string;
  interest: string;
  employment: string;
  email: string;
  website: string;
  enrolled_year: number;
  enrolled_month: number;
  graduation_year: number;
  is_alumni: boolean;
  image_path: string;
  image_org_name: string;
  index: number;
  updated?: boolean;
}

Answer 1

I think using dictionary with forkJoin will be an optimal way to solve your problem, because currently you are mixing async and sync code in ngOnInit.

Make sure you have Rxjs 6.5 version

Once all sources emit an value and completes, you could destruct response object and apply your code without having to worry about array order

forkJoin(
  // as of RxJS 6.5+ we can use a dictionary of sources
  {
    ms: this.ms.getAll(),
    ps:  this.ps.getAll(),
    rs: this.rs.getAll(),
    cs: this.cs.getAll()
  }
).subscribe(({member, publication, researc, course}) => {
  // Your code here
})

forkJoin docs

Answer 2

You can use union type in Typescript like below:

public answer: Array< Member|Publication|Research|Course> = []

For more details check this: Typescript