Décorateurs TypeScript

Qu’est-ce qu’un décorateur ?

Un décorateur permet d’ajouter des métadonnées à un élément du code.

Par exemple, le décorateur @Injectable :

@Injectable()
export class DataService {
  data = [1, 2, 3];
}

En matière de syntaxe :

  • Un décorateur commence toujours par le symbole @, suivi du nom du décorateur et d’une paire de parenthèses.
  • Un décorateur doit être positionné juste au-dessus ou à gauche de l’élément qu’il décore. L’élément décoré peut être une classe, une propriété ou méthode de classe, ou un paramètre de méthode.
  • Certains décorateurs reçoivent un objet de configuration en paramètre, d’autres pas. Ne pas oublier les parenthèses après le nom du décorateur, même si le décorateur ne prend pas de paramètres.

Où utiliser les décorateurs dans Angular ?

Le framework Angular fournit de nombreux décorateurs. Ils servent à transformer un simple symbole du langage TypeScript, comme une classe, en une entité spéciale reconnue par le framework.

Voyons quelques exemples.

Le décorateur @Component permet de transformer une classe en composant, et de définir les paramètres du composant comme son sélecteur ou son template :

@Component({
  selector: 'my-app',
  template: '<h1>App</h1>'
})
export class AppComponent { }

Le décorateur @Input permet de signaler qu’une propriété d’un composant recevra sa valeur depuis le composant parent :

export class AppComponent {
  @Input() name: string;
}
Informations

Tags : typescript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé