Typescript Generic Array of Interfaces

Question

I have a problem with more advanced Generic types in TypeScript.

What I want to do is an array of data where the data itself controlled by the type like:

[
 {
  type: "T1",
  content: number,
 },
 {
  type: "T2",
  values: {
   id: number,
   ...
  }
 }
]

I kinda get stacked after describing the available types like:

enum DataType {
 T1 = "t1",
 T2 = "t2"
}

So the result must look kinda like this, I guess:

interface DataGeneric<T> {
 [T extends DataType.T1]: { content: number },
 [T extends DataType.T2]: { values: { id: number, ... } },
} ???

interface Data<T extends DataType = any(?)> extends DataGeneric<T>{
 type: DataType,
 // and all the other fields are generic from T = DataType
}
const someData: Data[] | undefined = fetchData();

// suggesting that the `type` of element[1] is "t2"
// and VSCode suggestions works correctly too,
// consider that there is an object-field `values` with `id` key
someData[1].values.id 

Thanks in advance!

Answer 1

If you're checking an object's type property against a string or numberliteral to discriminate what type of data the rest of the object is holding, then you probably want to use a discriminated union instead of generics. That's basically a union type where the members of the union have a common discriminant key. In your case it could look like this:

enum DataType {
  T1 = "t1",
  T2 = "t2"
}

type Data =
  { type: DataType.T1, content: number } |
  { type: DataType.T2, values: { id: number } }

Then when you have a value data of type Data , you can check its type property and the compiler knows that it should narrow data to the right member of the union:

declare const someData: Data[] | undefined;

if (someData) {
  someData.forEach(data => {
    if (data.type === DataType.T1) {
      data.content.toFixed();
    } else {
      data.values.id.toFixed();
    }
  })
}

Playground link to code