an array with multiple complex types

Question

There is a question on SO about creating an array with different types, but I want to create an array with multiple complex types. The answer in the linked to question recommends using a union type, but I don't think that will suffice for a complex type, as typescript documentation says

If we have a value that has a union type, we can only access members that are common to all types in the union.

I want to create an array of Reports. However some of the reports have different properties from each other, and also several in common. I'm worried if I create it as below then somewhere in the code I might not be able to access the different properties on the subreports.

What's the recommended way to create an array of complex types in Typescript?

interface Reports extends Array<Report>{}

interface Report {
    id: number; 
    timestamp: number;
    type: string;
    subreport: SubReportA | SubReportB | SubReportC
}



interface SubReportA {
values: []
}
interface SubReportB {
random_property: number;
other_random_name: number;
}
interface SubReportC{
values: [];
name: string;
}

Shouldn't `SubReportA` etc. be subclasses of `SubReport`, and then you just have `subreport: Subreport`? — , Jun 22 '17 at 17:11
@RodrigoPedrosa map over it and render each member in a Report component inside a list. — Leahcim, Jun 22 '17 at 17:52
@torazaburo maybe that would also be a solution. I'll look into it https://stackoverflow.com/questions/41611737/typescript-how-to-declare-a-subclass-type — Leahcim, Jun 22 '17 at 17:53

score 3 · Accepted Answer · answered Jun 22 '17 at 17:24

That would be a use case for discriminated unions. First, we need a base interface for all kinds of sub-reports. I will also be adding a discriminating field kind that can only assume specific values known in compile time "A", "B" and "C".

interface SubReport {
    kind: "A" | "B" | "C";
}

At this point, we can make our interfaces specify one string literal each:

interface SubReportA {
  kind: "A";
  values: []
}

interface SubReportB {
  kind: "B";
  random_property: number;
  other_random_name: number;
}

interface SubReportC{
  kind: "C";
  values: [];
  name: string;
}

The same reasoning could be applied to the original Report type if need be. I'm not sure whether the report's "type" field is supposed to be a discriminator, but it can be moved to the subreport object if it is.

Also, as explained in the link above, discriminated unions allow you to retrieve specific fields once you test on the discriminator.

if (subreport.kind === 'B') {
  console.log(subreport.random_property);
}

an array with multiple complex types

1 Answers1