typescript-que-son-y-como-usar-decoradores

Qué son y como usar decoradores en TypeScript

Los decoradores en TypeScript son una sintaxis para funciones especiales que se aplican a una clase, método, propiedad o parámetro para modificar o añadir comportamientos adicionales.

Estas funciones se ejecutan en tiempo de compilación y pueden realizar tareas como la modificación de la funcionalidad de un método, el seguimiento de las llamadas a un método, la validación de parámetros de entrada (entre muchas otras cosas)

Creación de un decorador básico

Para crear un decorador en Typescript, simplemente necesitamos definir una función con el nombre del decorador y aplicarla a la clase, método, propiedad o parámetro que queramos decorar. Por ejemplo,

function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Método ${key} llamado con argumentos ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

En este ejemplo, definimos una función llamada logMethod que toma tres parámetros:

  • target, que es la clase a la que se aplica el decorador
  • key, que es el nombre del método decorado
  • descriptor, que es un objeto que contiene información sobre el método decorado

Por otro lado, en el cuerpo de esta función

  • Guardamos una referencia al método original
  • Redefinimos el método para que imprima un mensaje de registro antes de llamar al método original
  • Finalmente devolvemos el descriptor modificado

Aplicación de un decorador

Una vez que hemos creado nuestro decorador, podemos aplicarlo a la clase, método, propiedad o parámetro que deseemos decorar utilizando el símbolo @ seguido del nombre del decorador.

Vamos a verlo continuando el ejemplo anterior, viendo cómo aplicar el decorador logMethod a un método de una clase:

class MyClass {
  @logMethod
  myMethod(arg1: string, arg2: number) {
    console.log(`Método myMethod llamado con argumentos ${arg1} y ${arg2}`);
  }
}

En este ejemplo,

  • Aplicamos el decorador logMethod al método myMethod de la clase MyClass
  • Cuando se llame a myMethod, el decorador imprimirá un mensaje de registro antes de ejecutar el código original del método.