¿Cómo usar decoradores de propiedades en TypeScript?

Los decoradores son una forma de envolver una pieza de código existente con los valores y la funcionalidad deseados para crear una nueva versión modificada de la misma. Actualmente, solo se admite para una clase y sus componentes, como se menciona a continuación:

• Clase en sí
• Método de clase
• Propiedad de clase
• Accesor de objeto (getter y setter) de clase
• Parámetro de método de clase

Nota: actualmente, los decoradores se encuentran en una propuesta de etapa 2 para JavaScript y están disponibles como una característica experimental de TypeScript. Para habilitar el soporte experimental para decoradores, debe habilitar la opción del compilador experimentalDecorators en la línea de comando o en su tsconfig.json

Sintaxis:

@<decorator-name>(argument)
// code of component ...

Ejemplo: Tomemos un ejemplo, tenemos una clase Greeter que tiene dos propiedades firstMessage y secondMessage, que iniciaremos sesión en la consola. Usaremos un decorador para modificar la propiedad firstMessage agregando el nombre del remitente proporcionado en el argumento. Vea la clase a continuación:

class Greeter {
    @ModifyMessage('gfg')
    first_message: string;
    second_message: string;
}

Aquí hemos usado un decorador ModifyMessage para la propiedad firstMessage de la clase Greeter. Llamará a una función ModifyMessage en tiempo de ejecución con el argumento proporcionado. Debería devolver una función, dentro de esta función podemos jugar con la propiedad firstMessage. Vea esta función a continuación:

function ModifyMessage(sender: string) {
    return function (target: any, propertyKey: string) {
        // use  sender, target and propertyKey arguments ...
    }
}

La función que devolvimos toma dos parámetros: 

1. target: función constructora de la clase si usamos decorador en el miembro estático, o prototipo de la clase si usamos decorador en el miembro de instancia. En nuestro caso, firstMessage es un miembro de instancia, por lo que el objetivo se referirá al prototipo de la clase Greeter.
2. propertyKey: Es el nombre de la propiedad.

Vamos a crear una función getter y setter en nuestra función ModifyMessage. Estas funciones se activarán cuando queramos obtener firstMessage o establecer firstMessage en un nuevo valor. Vea el código a continuación:

function ModifyMessage(sender: string) {
  
    return function (target: any, propertyKey: string) {
        let modifiedMessage: string;
  
        // Return modifiedMessage whenever the message is asked
        const getter = function () {
            return modifiedMessage;
        };
  
        // Set the modifiedMessage value
        const setter = function () {
            modifiedMessage = `Hello from ${sender}!`;
        };
    }
}

Finalmente, usaremos la función Object.defineProperty. Se utiliza para agregar una propiedad dada a un objeto. Toma tres parámetros: 

1. Instancia de objeto: El objeto para el que queremos agregar propiedad. En nuestro caso, la instancia de Greeter Class se almacena en la variable de destino.
2. propertyName: El nombre de la propiedad
3. Objeto de configuración: Es un objeto con especificaciones de propiedad. En nuestro caso, agregaremos la función getter y setter como especificación.

Usaremos esta función para sobrescribir la propiedad firstMessage existente con nuestro mensaje modificado. Vea el código a continuación:

function ModifyMessage(sender: string) 
  
    return function (target: any, propertyKey: string) {
  
        let modifiedMessage: string;
  
        // Return modifiedMessage whenever the message is asked
        const getter = function () {
            return modifiedMessage;
        };
  
        // Set the modifiedMessage value
        const setter = function () {
            modifiedMessage = `Hello from ${sender}!`;
        };
  
        // Overwrite the original message with 
        // modifiedMessage we just created
        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter
        });
    }
}

Ahora estamos listos para usar el decorador. Vea el código completo a continuación:

function ModifyMessage(sender: string) {
  
    return function(target: any, propertyKey: string) {
      
        let modifiedMessage : string;
          
        // Return modifiedMessage whenever the message is asked
        const getter = function() {
            return modifiedMessage;
        };
          
        // Set the modifiedMessage value
        const setter = function() {
            modifiedMessage = `Hello from ${sender}!`;  
        }; 
  
        // Overwrite the original message with
        // modifiedMessage we just created
        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter
        });
    }
}
  
class Greeter {
      
     // Modify message property using decorator
    @ModifyMessage("gfg")
    firstMessage: string;
  
    secondMessage: string;
   
    constructor() {
        this.firstMessage = "Hi there!";
        this.secondMessage = "Hi there!";
    }
  
    greet() {
        console.log(`first message: ${this.firstMessage}`);
        console.log(`second message: ${this.secondMessage}`);
    }
}
  
let myGreeter = new Greeter();
myGreeter.greet();

Producción:

first message: Hello from gfg!
second message: Hi there!

Conclusión: Por lo tanto, vimos que podemos usar decoradores en la propiedad de las clases y manipularla. Los decoradores nos ayudan a crear un código más legible y flexible.