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
fullTemplateTypeCheck
By jiali
