how to make angular kendo-grid typesafe

Question

Variable dataItem has type any, I guess the type can't be inferred from the [kendoGridBinding] which binds to Array<T>? Do I need to use a type guard or type assertion on each column?

<kendo-grid [kendoGridBinding]="processTable()">
    <kendo-grid-column 
       field="qty"  <-- not type safe
       title="Qty Required"> 
    </kendo-grid-column>
    <kendo-grid-column title="Processed">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.events.length }}  <--- not type safe
      </ng-template>
    </kendo-grid-column>
   ...

I have a growing number of tables and refactoring the code e.g. renaming variables could in this situation cause errors undetected by the compiler.

Answer 1

Your issue can be solved by wrapping the let-dataItem:

Instead of this:

<kendo-grid-column title="Processed">
  <ng-template kendoGridCellTemplate let-dataItem>
    {{ dataItem.events.length }}  <--- not type safe
  </ng-template>
</kendo-grid-column>

Do this:

<kendo-grid-column title="Processed">
  <ng-template kendoGridCellTemplate let-untypedDataItem>
    <ng-container *ngIf="identity(untypedDataItem) as dataItem">
        {{ dataItem.events.length }}  <--- Now is type safe
    </ng-container>
  </ng-template>
</kendo-grid-column>

// typescript
identity(foo: any): MyType {
    return foo;
}

This is more or less the same answer I gave here, you can check other people approaches there.

---

The type assertion is noticed by the IDE when *ngFor or *ngIf is in use. The downside with this solution is that the inner is rendered "later" because of the *ngIf. And also, ngZone is called at every lifecycle which might result in a little performance drawback.