Extend generic type in abstract class property definition

Issue

We have multiple pages with data grids, sharing basic functionality -> paging, sorting, export. In order to simplify them and speed up the development, I want to create the BaseGrid abstract component, which will provide the above mentioned functionality.

Now, in order to handle export, we have checkbox in every row. To avoid using SelectionModels (like from Angular CDK) or any other helper arrays, I want to extend data grid DTO with simple boolean property isSelected. Then we can handle selection just with [(ngModel)] and three short functions.

Is there a way to do so in Abstract Class when specifying the type of the data property?

// Whatever kind of DataDTO the BaseGrid gets, I want to extend it with isSelected property
interface DATA_EXPORT_EXTENDER {
  isSelected: boolean;
}

@Directive()
export abstract class BaseGridComponent<T> implements OnDestroy {
  // Grid DTO provided as a Generic
  data: Array<DATA_EXPORT_EXTENDER extends T> = [];
  /*
    SHOWS FOLLOWING ERROR:

    Parsing error: '?' expected.eslint
    Public property 'data' of exported class has or is using private name ''.ts(4031)
    interface DATA_EXPORT_EXTENDER
  */
}

I wasn't expecting this to work and of course, it's not working. But is there actually a way to do something like that? I had to resort to data: Array<any> = [];, othwerwise while looping, data.isSelected throws an error: does not exists on type T.

Solution

How about using the intersection operator (&) ?

// Whatever kind of DataDTO the BaseGrid gets, I want to extend it with isSelected property
interface DATA_EXPORT_EXTENDER {
  isSelected?: boolean; // changed here
}

@Directive()
export abstract class BaseGridComponent<T> implements OnDestroy {
  // Grid DTO provided as a Generic
  data: Array<DATA_EXPORT_EXTENDER & T> = [];    // changed here
  // or
  // data: Array<{ isSelected?: boolean; } & T> = [];
}

Also shouldn't the data be accessed as.

this.data[0].isSelected

Answered By - Naren Murali