fullTemplateTypeCheck

base on Alex Rickabaugh's doc

Who am I

  • Name: Jia Li
  • Company: @ThisDot
  • Zone.js: Code Owner
  • Angular: Collaborator
  • @JiaLiPassion

fullTemplateTypeCheck

{
  "compilerOptions": {
     ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
  }
}

Sample

<div *ngIf="someFlag">
  {{childViewExp.wrongProp}}
</div>
	
interface ChildViewExp {
  correctProp: string;
}

@Component({
 ...
})
export class SampleComponent implements OnInit {
  childViewExp: ChildViewExp = {correctProp: 'test'};
  constructor() {}

  ngOnInit() {}
}

fullTemplateTypeCheck

  • need to be configured in tsconfig.json
  • aot need to be true

sub template

<div *ngIf="someFlag">
  {{childViewExp.wrongProp}}
</div>
fullTemplateTypeCheck ViewEngine Ivy
false doesn't check Same with VE
true check type in expression Same with VE

Bind to Component

<lib-sample-lib [libInput]="libInputWrapper.input"></lib-sample-lib>
fullTemplateTypeCheck ViewEngine Ivy
false doesn't check Same with VE
true check type in expression 1. Check type in expression
2. Check the value of expression assignable to input or not

Bind to DOM

<img [src]="image.url">
<img [src]="image.size">
fullTemplateTypeCheck ViewEngine Ivy
false doesn't check Same with VE
true check type in expression 1. Check type in expression
2. Check the value of expression assignable to input or not?

Async Pipe

<img [src]="(image$ | async).url">
<img [src]="(image$ | async).urll">
fullTemplateTypeCheck ViewEngine Ivy
false doesn't check Same with VE
true check type of the return value of the pipe Same with VE

Event Binding (Output)

<lib-sample-lib (libOutput)="libOutputEmitted($event)"></lib-sample-lib>
fullTemplateTypeCheck ViewEngine Ivy
false $event will be any Same with VE
true $event will be any $event will be the exact type produced by EventEmitter?

Event Binding (DOM)

<button (click)="btnClicked($event)"></button>
fullTemplateTypeCheck ViewEngine Ivy
false $event will be any Same with VE
true $event will be any Same with VE

NgFor

<li *ngFor="let item of items">
  {{item.wrongProp}}
</li>
fullTemplateTypeCheck ViewEngine Ivy
false will not check Same with VE
true item will be any item will be the exact type

componentRef

<component #ref></component>
{{ref.something}}
fullTemplateTypeCheck ViewEngine Ivy
false ref will be any Same with VE (now has bug)
true ref will be the component type Same with VE

DOM ref

<input #ref>
{{ref.wrongValue}}
fullTemplateTypeCheck ViewEngine Ivy
false ref will be any Same with VE (now has bug)
true ref will be any ref will be the exact type of the element (in this case will be HTMLInputElement)

Inference Directive

@Directive({
  selector: '[dir]', exportAs: 'dir',
})
export class Dir<T> {
  @Input() dir!: T;
  field: T;
}
<div [dir]="3" #ref="dir">{{ref.field.length}}</div>
fullTemplateTypeCheck ViewEngine Ivy
false ref will be any Same with VE (now has bug)
true ref will be any ref will be the exact type of the dir 

Finally

  • Ivy can do more check than View Engine
  • In the ivy final version, with fullTemplateTypeCheck = true, ivy should behave the same with ViewEngine
  • Ivy will do the further check only if a new `strictTemplates` flag is passed to ngtsc.  https://github.com/angular/angular/pull/33365
Made with Slides.com