TypeScript
Décorateur de classe

Paramètres

Décorateur de classe de base

Un décorateur de classe est juste une fonction qui prend la classe comme seul argument et la retourne après avoir fait quelque chose avec:

function log<T>(target: T) {
    
    // Do something with target
    console.log(target);
    
    // Return target
    return target;

}

Nous pouvons ensuite appliquer le décorateur de classe à une classe:

@log
class Person {
    private _name: string;
    public constructor(name: string) {
        this._name = name;
    }
    public greet() {
        return this._name;
    }
}

Générer des métadonnées en utilisant un décorateur de classe

Cette fois, nous allons déclarer un décorateur de classe qui ajoutera des métadonnées à une classe lorsque nous lui avons appliqué:

function addMetadata(target: any) {
    
    // Add some metadata
    target.__customMetadata = {
        someKey: "someValue"
    };
    
    // Return target
    return target;

}

Nous pouvons alors appliquer le décorateur de classe:

@addMetadata
class Person {
    private _name: string;
    public constructor(name: string) {
        this._name = name;
    }
    public greet() {
        return this._name;
    }
}

function getMetadataFromClass(target: any) {
    return target.__customMetadata;
}

console.log(getMetadataFromClass(Person));

Le décorateur est appliqué lorsque la classe n'est pas déclarée lorsque nous créons des instances de la classe. Cela signifie que les métadonnées sont partagées entre toutes les instances d'une classe:

function getMetadataFromInstance(target: any) {
    return target.constructor.__customMetadata;
}

let person1 = new Person("John");
let person2 = new Person("Lisa");

console.log(getMetadataFromInstance(person1));
console.log(getMetadataFromInstance(person2));

Passer des arguments à un décorateur de classe

Nous pouvons envelopper un décorateur de classe avec une autre fonction pour permettre la personnalisation:

function addMetadata(metadata: any) {
    return function log(target: any) {
    
        // Add metadata
        target.__customMetadata = metadata;
        
        // Return target
        return target;
    
    }
}

addMetadata prend quelques arguments utilisés comme configuration, puis retourne une fonction sans nom qui est le décorateur réel. Dans le décorateur, nous pouvons accéder aux arguments car il y a une fermeture en place.

On peut alors invoquer le décorateur en passant des valeurs de configuration:

@addMetadata({ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" })
class Person {
    private _name: string;
    public constructor(name: string) {
        this._name = name;
    }
    public greet() {
        return this._name;
    }
}

Nous pouvons utiliser la fonction suivante pour accéder aux métadonnées générées:

function getMetadataFromClass(target: any) {
    return target.__customMetadata;
}

console.log(getMetadataFromInstance(Person));

Si tout s'est bien passé, la console devrait afficher:

{ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" }