Angular permet de vérifier les expressions et bindings dans les templates des composants, comme TypeScript le fait dans le code. Il y a actuellement 3 modes de vérification, selon les valeurs des options fullTemplateTypeCheck et strictTemplates dans votre fichier tsconfig.json.

Dans cet article, je me concentre sur l'option la plus intéressante, à savoir strictTemplates.

Prenons cette interface Book comme exemple :

interface Book {
 name: string;
 author: {
    firstName: string;
    lastName: string;
   };
}

On affiche une liste de books: Book[] dans notre template :

<h2>{{config.title}}</h2>
<div *ngFor="let book of books">
&nbsp;<span>Name: {{book.name}}</span>
&nbsp;<app-author-name [name]="book.author.lastName"></app-author-name>
</div>

Et notre (très basique) AuthorNameComponent, qui accepte un @Input() name: string; :

<span>Author: {{name}}</span>

1) Mode basique : { strictTemplates: false, fullTemplateTypeCheck: false }

En mode basique, Angular ne valide que les expressions de "haut niveau" dans le template. Dans l'exemple précédent, le compilateur vérifie les points suivants :

  • config est une propriété du composant et possède une propriété title
  • books est une propriété du composant

Cependant, il ne vérifie pas :

  • si le type de book.author.lastName est assignable à l'input name de component
  • le type de la variable book dans le *ngFor (ici, book: any)
  • les types des #refs, les résultats des pipes, ni le type de $event dans le binding des évènements.

2) Mode strict : { strictTemplates: true }

Angular maintient le comportement de l'option fullTemplateTypeCheck, et permet l'utilisation d'un mode strict. Le mode strict est une extension du mode "full", et est activé en mettant l'option strictTemplates à true.

En mode strict, Angular vérifie les éléments suivants :

  • Que les bindings de composants / directives sont assignable à leurs @Input()s:

Dans notre exemple, book.author.lastName doit être de type string pour être valide, sinon le compilateur enverra une erreur.

  • Les templates *ngFor :

Désormais, la variable book dans la boucle *ngFor a le type Book (book: Book). De cette façon, nous ne pouvons utiliser que des propriétés connues de Book dans la boucle.

Par exemple:

<span>{{book.title}}</span>

donnera l'erreur suivante :

Property' title' does not exist on type Book.
  • Que le type de $event est cohérent avec le composant.
  • … Et encore plus de vérifications :)

En conclusion, strictTemplates est une option très puissante (introduite avec Angular 9) que je vous encourage fortement à utiliser dans vos projets Angular. Cela vous permettra d'éviter bien des problèmes de typage dans vos templates.