[Table] Mat cell definitions do not ensure correct typing

[earshinov]

Cell definitions like

<td mat-cell *matCellDef="let element"> {{element.position}} </td>

do not enforce typing. Even if table dataSource

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

is properly typed, let element is still of type any, which does not allow the TypeScript compiler to type-check the markup inside the cell definition.

On the test page (https://stackblitz.com/edit/mat-tables-typing), I modified the table-basic example from the repo to output a non-existing field (element.non_existing_field), and the project is still compiled without any TypeScript errors.

I am sure I does not need to explain how beneficial strong typing is for early detection of programming errors. Furthermore, TypeScript and strong typing is one of the principal features of Angular as a framework, so I consider it great shame that this feature is not properly leveraged here.

I am not an expert in Angular, so please let me know if there are some Angular limitations that prevent Angular Material from providing proper typing support. I will appreciate if you point me to an appropriate ticket in Angular project I could watch.

Reproduction

https://stackblitz.com/edit/mat-tables-typing

Expected Behavior

In a cell definition like

<td mat-cell *matCellDef="let element"> {{element.position}} </td>

the element variable should receive a TypeScript type derived from the type of dataSource input passed to mat-table.

Changing the cell definition into

<td mat-cell *matCellDef="let element"> {{element.non_existing_field}} </td>

should cause TypeScript errors to be emitted when the project is AOT-compiled.

Actual Behavior

The element variable receives type any.

Changing the cell definition into

<td mat-cell *matCellDef="let element"> {{element.non_existing_field}} </td>

does not trigger any TypeScript errors. I believe, you will have to download the StackBlitz project locally in order to check this.

Environment

• Angular: 8.0.0
• CDK/Material: 8.0.0
• Browser(s): Google Chrome | 74.0.3729.169 (Official Build) (64-bit)
• Operating System: Windows 10

[Airblader]

This isn't an issue with Angular Components, but a shortcoming of Angular itself as the language service has no way of knowing how the context will be populated when the template is instantiated. As a workaround you can create a function that narrows the type but is otherwise the identity function, then ngIf on that. This is basically a type assertion for the language service.

There's definitely an open issue in angular/angular for this.

[Airblader]

For example angular/angular#28731 but there might be others.

[earshinov]

@Airblader , thank you for your comments.

As a workaround you can create a function that narrows the type but is otherwise the identity function, then ngIf on that. This is basically a type assertion for the language service.

Are you sure that it will work? ngIf="... as ..." seems to have similar problems:
https://stackoverflow.com/questions/51376401/is-there-any-way-to-preseve-type-in-angular-templates-when-using-as-keyword

I have tried

public assertItemType(item: TItem): TItem {
  return item;
}

<td mat-cell *matCellDef="let _item">
  <ng-container *ngIf="assertItemType(_item) as item">{{ item.non_existing_field }}</ng-container>
</td>

There are still no compilation errors (Angular 8).

[Airblader]

I meant the second method using assertItemType. I have definitely successfully used that, though on explicit ng-template nodes rather than through structural directives. Also not sure if it caused a compile error for me, but the language service definitely started complaining. I doubt this actually makes a difference for the language service, though.

So you have strictTemplateTypeChecks enabled?

[earshinov]

Still compiles without errors with fullTemplateTypeCheck...

The type guard approach from https://stackoverflow.com/questions/47220910/can-i-do-type-narrowing-in-an-angular-template also did not help.

Complete code:

...
assertItemType(item: PeriodicElement): PeriodicElement {
  return item;
}

assertItemType2(item: PeriodicElement): item is PeriodicElement {
  return true;
}
...

...
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No </th>
<td mat-cell *matCellDef="let _element">
    <ng-container *ngIf="assertItemType(_element) as element">{{element.non_existing_field}}</ng-container>
</td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let _element">
    <ng-container *ngIf="assertItemType2(_element)">{{_element.non_existing_field}}</ng-container>
</td>
</ng-container>
...

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "strict": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true
  }
}

Note that I have enabled "strict" and "fullTemplateTypeCheck"

[earshinov]

Interestingly enough, Angular complains about this:

<ng-container *ngIf="assertItemType2(_element) && _element.non_existing_field"></ng-container>

ERROR in src\app\table-basic\table-basic-example.html(18,21): : Property 'non_existing_field' does not exist on type 'PeriodicElement'.

but not this:

<ng-container *ngIf="assertItemType2(_element)">{{_element.non_existing_field}}</ng-container>

Apparently, type information from the type guard is available in the *ngIf expression itself, but Angular fails to apply it to the nested template {{_element.non_existing_field}}, even under fullTemplateTypeCheck.

[Airblader]

Does it work if you desugar the structural directive by hand and use ng-template? That's how I used the type assertion trick so far.

This probably warrants an issue on its own if it doesn't exist yet.

[earshinov]

Nope, no errors with a desugared version:

<!-- Weight Column -->
<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef>Weight</th>
  <td mat-cell *matCellDef="let _element">
    <ng-template [ngIf]="assertItemType(_element)" let-element="ngIf">
      {{element.non_existing_field}}
    </ng-template>
  </td>
</ng-container>

[jelbourn]

This is indeed something that has to be fixed at the Angular level; we don't have any ability to make templates more strict at the library-level. The new ivy rendering engine for Angular will lead to much improved template type checking when it arrives in a later release.

[Airblader]

There's nothing in Ivy that will change this, though. ;-)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}