Cómo utilizar decoradores en TypeScript

Los decoradores en TypeScript son una característica poderosa que permite a los desarrolladores agregar funcionalidad adicional a clases, métodos, propiedades y parámetros. Proporcionan una manera de modificar el comportamiento del código existente sin cambiar su estructura actual. Esta guía explicará cómo usar decoradores en TypeScript con ejemplos fáciles de seguir.

¿Qué son los decoradores?

Los decoradores son funciones especiales que se pueden aplicar a clases, métodos, propiedades o parámetros. Se invocan en tiempo de ejecución y permiten a los desarrolladores anotar y modificar el código de forma declarativa. Para habilitar los decoradores en un proyecto TypeScript, el indicador experimentalDecorators debe estar configurado en true en el archivo tsconfig.json.

Habilitar decoradores en TypeScript

Para utilizar decoradores, el compilador TypeScript debe estar configurado para reconocerlos. Esto se puede hacer configurando el indicador experimentalDecorators en true en el archivo tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Una vez habilitados los decoradores, se pueden usar en todo el proyecto.

Creando un decorador de clase

Un decorador de clase se aplica a una declaración de clase y se puede utilizar para modificar o reemplazar una definición de clase. Los decoradores de clase se declaran justo encima de la clase que decoran, utilizando el símbolo @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

En este ejemplo, el decorador LogClass registra un mensaje cuando se crea la clase Person. El decorador se define como una función que toma un único argumento: el constructor de la clase que se está decorando.

Decoradores de métodos

Los decoradores de métodos se aplican a los métodos dentro de una clase. Permiten a los desarrolladores interceptar llamadas a métodos, modificar su comportamiento o realizar operaciones adicionales antes o después de ejecutar el método.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Aquí, el decorador LogMethod registra el nombre del método y sus argumentos cada vez que se llama al método add. Envuelve el método original en una nueva función que realiza el registro antes de delegar en el método original.

Decoradores de propiedades

Los decoradores de propiedades se utilizan para observar o modificar el comportamiento de las propiedades de clase. A diferencia de los decoradores de métodos, no tienen acceso al valor de la propiedad en sí, pero pueden agregar metadatos a las propiedades.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

En este ejemplo, el decorador ReadOnly se aplica a la propiedad title de la clase Book, haciéndola de solo lectura al establecer writable en false.

Decoradores de parámetros

Los decoradores de parámetros se utilizan para anotar o modificar los parámetros de un método. Reciben tres argumentos: el objeto de destino, el nombre del método y el índice del parámetro.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

En este ejemplo, el decorador LogParameter se aplica al parámetro message del método greet en la clase UserService. El decorador registra información sobre el parámetro que se está decorando.

Conclusión

Los decoradores en TypeScript ofrecen una forma eficaz de mejorar la funcionalidad del código sin alterar su estructura. Al aprovechar los decoradores de clases, métodos, propiedades y parámetros, los desarrolladores pueden agregar fácilmente funcionalidad reutilizable en sus proyectos. Con los ejemplos que se proporcionan en esta guía, es fácil comenzar a usar decoradores en TypeScript.