ngtsc template type checker does not deduce type information from directives like *ngIf

🚀 feature request

Relevant Package

This feature request is for @angular/compiler-cli, particularly the ngtsc/typecheck part.

Description

component.ts:

export class AppComponent {
  returnsString(): string { return '1'; }
  requiresNumber(arg: number): void {  }
}

component.html:

<ng-container *ngIf="returnsString() as value">
  <!--
    Type of 'value' is detected by Angular language service.
    A type error
      - IS NOT detected by Angular language service
      - IS NOT detected by Angular compiler
    Compiled successfully...
  -->
  <button type="button" (click)="requiresNumber(value)"></button>
</ng-container>

With so much talk about Ivy’s ability to typecheck Angular templates, I would naturally expect the obvious type error to be discovered here. If not by Angular language service, then at least during compilation.

I have double- and triple-checked this issue with latest Angular RC, “enableIvy”, “fullTemplateTypeCheck”, “strict: true”, and “ng build --prod”.

Describe the solution you’d like

It would be nice if the template type checker could analyze a template as a whole, producing for the template snippet above TypeScript code like the following:

const value = this.returnsString();
if (value)
  button.addEventListener('click', () => this.requiresNumber(value));

which obviously would make the type check fail as expected.

Describe alternatives you’ve considered

I know no workarounds.

Version information

$ ng version

Angular CLI: 9.0.0-rc.8
Node: 10.16.0
OS: win32 x64

Angular: 9.0.0-rc.8
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.8
@angular-devkit/build-angular     0.900.0-rc.8
@angular-devkit/build-optimizer   0.900.0-rc.8
@angular-devkit/build-webpack     0.900.0-rc.8
@angular-devkit/core              9.0.0-rc.8
@angular-devkit/schematics        9.0.0-rc.8
@ngtools/webpack                  9.0.0-rc.8
@schematics/angular               9.0.0-rc.8
@schematics/update                0.900.0-rc.8
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Keywords

ivy, template type checker, fullTemplateTypeCheck, ngIf

[JoostK]

@earshinov Indeed, using strictTemplates this level of type inference is indeed fully functional in 9.0.0-rc.7. The code you’re suggesting to generate is more or less exactly what the compiler does indeed generate 😃 Note that this level of inference requires strictInputTypes not to be disabled.

There’s currently still a restriction with ngIf and the as syntax to declare a variable corresponding with the NgIfContext.ngIf property. The template type checker allows a directive to declare a so-called template guard, which results in the if (value) in your suggested code to be generated. This results in type-narrowing of value, but not NgIfContext.ngIf. In your Material example, the assertItemType is probably the one that removes the nullability from the type, so you’re probably not suffering from this limitation. We’re looking into removing this limitation so that it will work correctly.

[alexzuza]

I would also try with strictTemplates option enabled https://twitter.com/yurzui/status/1206787411210055680

Demo