PricingLoginStart free
Frontend Academy · Leçon

Décorateurs et métadonnées

Activez les décorateurs expérimentaux, écrivez des décorateurs de classes, de méthodes et de propriétés, puis utilisez reflect-metadata pour les schémas d’injection de dépendances.

Leçon 2 sur 414 étapes

Décorateurs et métadonnées est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que sont les décorateurs ?

Les décorateurs sont des fonctions qui modifient des classes, des méthodes, des propriétés ou des paramètres au moment de leur définition. Ils sont largement utilisés dans Angular, NestJS, TypeORM et MobX basé sur des classes.

Syntaxe des décorateurs

Préfixez une classe, une méthode, une propriété ou un paramètre avec @DecoratorName. La fonction décoratrice s’exécute lorsque la classe est définie.

@Component({ selector: 'app-root' })
export class AppComponent {
  @Input() title: string;

  @HostListener('click')
  onClick() {
    console.log('clicked');
  }
}

Activer les décorateurs

Activez l’option expérimentale dans tsconfig.json. Les nouveaux décorateurs ECMAScript de l’étape 3 (TypeScript 5.0+) n’ont pas besoin de cette option, mais leur sémantique est différente.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Décorateur de classe

Reçoit le constructeur comme argument. Peut remplacer, envelopper ou enrichir la classe.

function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
  let instance: T;
  return class extends target {
    constructor(...args: any[]) {
      if (!instance) instance = new target(...args) as T;
      return instance;
    }
  };
}

@Singleton
class Logger { /* ... */ }

Décorateur de méthode

Reçoit (cible, clé, descripteur). Peut envelopper la méthode — par exemple pour consigner les appels.

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`[${key}]`, args);
    return original.apply(this, args);
  };
}

class Service {
  @Log
  greet(name: string) { return `Hello ${name}`; }
}

Décorateur de propriété

Reçoit (cible, clé). Est souvent utilisé avec reflect-metadata pour enregistrer des informations sur la propriété.

function Required(target: any, key: string) {
  const existing = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...existing, key], target);
}

class User {
  @Required name: string;
  @Required email: string;
}

Décorateur de paramètre

Reçoit (cible, clé, parameterIndex). Sert à l’injection de dépendances — pour enregistrer les paramètres qui nécessitent certains services.

function Inject(token: string) {
  return function (target: any, key: string, index: number) {
    const existing = Reflect.getMetadata('inject', target, key) || {};
    existing[index] = token;
    Reflect.defineMetadata('inject', existing, target, key);
  };
}

class UserService {
  constructor(@Inject('Database') db: Database) {}
}

reflect-metadata

reflect-metadata est un polyfill qui permet aux décorateurs de lire et d’écrire des métadonnées sur les classes. Il est requis pour le DI d’Angular et de nombreux ORM.

npm install reflect-metadata

// main.ts (entry point):
import 'reflect-metadata';

import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'

Fabriques de décorateurs

Une fabrique renvoie un décorateur — elle sert à transmettre des arguments.

function Component(config: { selector: string }) {
  return function (target: any) {
    target.selector = config.selector;
  };
}

@Component({ selector: 'app-root' })
class AppComponent {}

Cas d’utilisation&nbsp;: validation

Combinez des décorateurs de propriété avec une fonction validate() pour créer une petite bibliothèque de validation.

// Decorator records that a field is required:
function Required(target: any, key: string) {
  const fields = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...fields, key], target);
}

class User {
  @Required name!: string;
  @Required email!: string;
}

function validate(obj: any): string[] {
  const required: string[] = Reflect.getMetadata('required', obj) || [];
  return required.filter(k => obj[k] == null);
}

Décorateurs de l’étape 3 (TC39)

Les décorateurs standardisés (TS 5.0+, pris en charge dans Node 22+ derrière une option) ont une signature différente. Ils n’ont besoin ni de l’option expérimentale ni de reflect-metadata.

Quand utiliser les décorateurs

Utilisez les décorateurs lorsque le framework les fournit (Angular, NestJS, TypeORM). N’en créez pas vous-même dans du code frontend classique : ils ajoutent de la complexité et vous lient à un comportement d’exécution spécifique.

Vérification rapide

Quelles options de tsconfig devez-vous activer pour utiliser les décorateurs historiques (expérimentaux) avec la réflexion des métadonnées ?

Réponds-y dans la leçon interactive

Récapitulatif : décorateurs

Les décorateurs modifient les classes, méthodes, propriétés et paramètres au moment de leur définition. Activez experimentalDecorators + emitDecoratorMetadata. Les signatures des décorateurs de classe, de méthode, de propriété et de paramètre diffèrent. reflect-metadata stocke les métadonnées ; les fabriques transmettent des arguments. Les décorateurs sont très utilisés par Angular, NestJS et TypeORM. Les décorateurs de l’étape 3 (TS 5+) représentent l’avenir et ne nécessitent aucune option.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
41
Leçons
163
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Décorateurs et métadonnées » est-elle gratuite ?

Oui — le texte complet de « Décorateurs et métadonnées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Décorateurs et métadonnées » ?

Activez les décorateurs expérimentaux, écrivez des décorateurs de classes, de méthodes et de propriétés, puis utilisez reflect-metadata pour les schémas d’injection de dépendances. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Décorateurs et métadonnées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Types de littéraux de modèles
  2. Décorateurs et métadonnées
  3. TypeScript avec React : génériques, FC et hooks
  4. Mode strict et suppression de any
← Retour à Frontend Academy