Decoradores de JavaScript: Metadatos y Transformación

Los decoradores de JavaScript, una característica inspirada en lenguajes como Python y Java, proporcionan una forma potente y expresiva de añadir metadatos y transformar clases, métodos, propiedades y parámetros. Ofrecen una sintaxis limpia y declarativa para mejorar la funcionalidad del código y promover la separación de responsabilidades. Aunque todavía son una adición relativamente nueva al ecosistema de JavaScript, los decoradores están ganando popularidad, especialmente en frameworks como Angular y bibliotecas que aprovechan los metadatos para la inyección de dependencias y otras características avanzadas. Este artículo explora los fundamentos de los decoradores de JavaScript, su aplicación y su potencial para crear bases de código más mantenibles y extensibles.

¿Qué son los decoradores de JavaScript?

En esencia, los decoradores son tipos especiales de declaraciones que se pueden adjuntar a clases, métodos, accesores, propiedades o parámetros. Utilizan la sintaxis @expression, donde expression debe evaluarse como una función que será llamada en tiempo de ejecución con información sobre la declaración decorada. Los decoradores actúan esencialmente como funciones que modifican o amplían el comportamiento del elemento decorado.

Piensa en los decoradores como una forma de envolver o aumentar el código existente sin modificarlo directamente. Este principio, conocido como el patrón Decorator en el diseño de software, te permite añadir funcionalidad a un objeto de forma dinámica.

Habilitar los decoradores

Aunque los decoradores forman parte del estándar ECMAScript, no están habilitados por defecto en la mayoría de los entornos de JavaScript. Para usarlos, normalmente necesitarás configurar tus herramientas de compilación. A continuación, se muestra cómo habilitar los decoradores en algunos entornos comunes:

• TypeScript: Los decoradores son compatibles de forma nativa en TypeScript. Asegúrate de que la opción del compilador experimentalDecorators esté establecida en true en tu archivo tsconfig.json:

            {
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // Opcional, pero a menudo útil
    "module": "commonjs", // U otro sistema de módulos como "es6" o "esnext"
    "moduleResolution": "node"
  }
}
            

              
                Copy
              
            
          

• Babel: Si estás usando Babel, necesitarás instalar y configurar el plugin @babel/plugin-proposal-decorators:

            npm install --save-dev @babel/plugin-proposal-decorators

            

              
                Copy
              
            
          

Luego, añade el plugin a tu configuración de Babel (por ejemplo, .babelrc o babel.config.js):

            {
  "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
}
            

              
                Copy
              
            
          

La opción version es importante y debe coincidir con la versión de la propuesta de decoradores que estás utilizando. Consulta la documentación del plugin de Babel para conocer la última versión recomendada.

Tipos de decoradores

Existen varios tipos de decoradores, cada uno diseñado para elementos específicos:

• Decoradores de clase: Aplicados a las clases.
• Decoradores de método: Aplicados a los métodos dentro de una clase.
• Decoradores de accesor: Aplicados a los accesores getter o setter.
• Decoradores de propiedad: Aplicados a las propiedades de una clase.
• Decoradores de parámetro: Aplicados a los parámetros de un método o constructor.

Decoradores de clase

Los decoradores de clase se aplican al constructor de una clase y pueden usarse para observar, modificar o reemplazar la definición de una clase. Reciben el constructor de la clase como único argumento.

Ejemplo:

            function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// Intentar añadir propiedades a la clase sellada o a su prototipo fallará

            

              
                Copy
              
            
          

En este ejemplo, el decorador @sealed evita modificaciones adicionales a la clase Greeter y su prototipo. Esto puede ser útil para asegurar la inmutabilidad o prevenir cambios accidentales.

Decoradores de método

Los decoradores de método se aplican a los métodos dentro de una clase. Reciben tres argumentos:

• target: El prototipo de la clase (para métodos de instancia) o el constructor de la clase (para métodos estáticos).
• propertyKey: El nombre del método que se está decorando.
• descriptor: El descriptor de propiedad para el método.

Ejemplo:

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

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(x: number, y: number) {
    return x + y;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                      //         Method add returned: 5

            

              
                Copy
              
            
          

El decorador @log registra los argumentos y el valor de retorno del método add. Este es un ejemplo simple de cómo los decoradores de método pueden usarse para registro (logging), perfiles (profiling) u otras responsabilidades transversales.

Decoradores de accesor

Los decoradores de accesor son similares a los decoradores de método, pero se aplican a los accesores getter o setter. También reciben los mismos tres argumentos: target, propertyKey y descriptor.

Ejemplo:

            function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

class Point {
  private _x: number;
  private _y: number;

  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }

  @configurable(false)
  get x() {
    return this._x;
  }

  set x(value: number) {
      this._x = value;
  }
}

const point = new Point(1, 2);
// Object.defineProperty(point, 'x', { configurable: true }); // Lanzaría un error porque 'x' no es configurable

            

              
                Copy
              
            
          

El decorador @configurable(false) evita que el getter x sea reconfigurado, haciéndolo no configurable.

Decoradores de propiedad

Los decoradores de propiedad se aplican a las propiedades de una clase. Reciben dos argumentos:

• target: El prototipo de la clase (para propiedades de instancia) o el constructor de la clase (para propiedades estáticas).
• propertyKey: El nombre de la propiedad que se está decorando.

Ejemplo:

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

class Person {
  @readonly
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("Alice");
// person.name = "Bob"; // Esto causará un error en modo estricto porque 'name' es de solo lectura

            

              
                Copy
              
            
          

El decorador @readonly hace que la propiedad name sea de solo lectura, evitando que se modifique después de la inicialización.

Decoradores de parámetro

Los decoradores de parámetro se aplican a los parámetros de un método o constructor. Reciben tres argumentos:

• target: El prototipo de la clase (para métodos de instancia) o el constructor de la clase (para métodos estáticos o constructores).
• propertyKey: El nombre del método o constructor.
• parameterIndex: El índice del parámetro en la lista de parámetros.

Los decoradores de parámetro se utilizan a menudo con reflexión (reflection) para almacenar metadatos sobre los parámetros de una función. Estos metadatos pueden luego ser utilizados en tiempo de ejecución para inyección de dependencias u otros fines. Para que esto funcione correctamente, necesitas habilitar la opción del compilador emitDecoratorMetadata en tu archivo tsconfig.json.

Ejemplo (usando reflect-metadata):

            import 'reflect-metadata';

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  let existingRequiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyKey) || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata("required", existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function (...args: any[]) {
    let requiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyName);
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (args[parameterIndex] === null || args[parameterIndex] === undefined) {
          throw new Error(`Missing required argument at index ${parameterIndex}`);
        }
      }
    }
    return method.apply(this, args);
  };
}

class User {
  name: string;
  age: number;

  constructor(@required name: string, public surname: string, @required age: number) {
    this.name = name;
    this.age = age;
  }

  @validate
  greet(prefix: string, @required salutation: string): string {
    return `${prefix} ${salutation} ${this.name}`;
  }
}

// Uso

try {
  const user1 = new User("John", "Doe", 30);
  console.log(user1.greet("Mr.", "Hello"));

  const user2 = new User(undefined as any, "Doe", null as any);

} catch (error) {
  console.error(error.message);
}

try {
  const user = new User("John", "Doe", 30);
  console.log(user.greet("Mr.", undefined as any));
} catch (error) {
  console.error(error.message);
}


            

              
                Copy
              
            
          

En este ejemplo, el decorador @required marca los parámetros como obligatorios. El decorador @validate luego usa reflexión (a través de reflect-metadata) para verificar si los parámetros requeridos están presentes antes de llamar al método. Este ejemplo muestra el uso básico, y se recomienda crear una validación de parámetros robusta en un escenario de producción.

Para instalar reflect-metadata:

            npm install reflect-metadata --save

            

              
                Copy
              
            
          

Uso de decoradores para metadatos

Uno de los usos principales de los decoradores es adjuntar metadatos a las clases y sus miembros. Estos metadatos se pueden utilizar en tiempo de ejecución para diversos fines, como la inyección de dependencias, la serialización y la validación. La biblioteca reflect-metadata proporciona una forma estándar de almacenar y recuperar metadatos.

Ejemplo:

            import 'reflect-metadata';

const TYPE_KEY = "design:type";
const PARAMTYPES_KEY = "design:paramtypes";
const RETURNTYPE_KEY = "design:returntype";

function Type(type: any) {
    return Reflect.metadata(TYPE_KEY, type);
}


function LogType(target: any, propertyKey: string) {
  const t = Reflect.getMetadata(TYPE_KEY, target, propertyKey);
  console.log(`${target.constructor.name}.${propertyKey} type: ${t.name}`);
}

class Demo {
    @LogType
    public name: string;
    constructor(name: string){
      this.name = name;
    }
}

            

              
                Copy
              
            
          

Fábricas de decoradores

Las fábricas de decoradores son funciones que devuelven un decorador. Te permiten pasar argumentos al decorador, haciéndolo más flexible y reutilizable.

Ejemplo:

            function deprecated(deprecationReason: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      console.warn(`Method ${propertyKey} is deprecated: ${deprecationReason}`);
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

class LegacyComponent {
  @deprecated("Use the newMethod instead.")
  oldMethod() {
    console.log("Old method called");
  }

  newMethod() {
    console.log("New method called");
  }
}

const component = new LegacyComponent();
component.oldMethod(); // Output: Method oldMethod is deprecated: Use the newMethod instead.
                       //         Old method called

            

              
                Copy
              
            
          

La fábrica de decoradores @deprecated toma un mensaje de obsolescencia como argumento y registra una advertencia cuando se llama al método decorado. Esto te permite marcar métodos como obsoletos y proporcionar orientación a los desarrolladores sobre cómo migrar a alternativas más nuevas.

Casos de uso en el mundo real

Los decoradores tienen una amplia gama de aplicaciones en el desarrollo moderno de JavaScript:

• Inyección de dependencias: Frameworks como Angular dependen en gran medida de los decoradores para la inyección de dependencias.
• Enrutamiento: En aplicaciones web, los decoradores se pueden usar para definir rutas para controladores y métodos.
• Validación: Los decoradores se pueden usar para validar datos de entrada y asegurar que cumplan ciertos criterios.
• Autorización: Los decoradores se pueden usar para hacer cumplir políticas de seguridad y restringir el acceso a ciertos métodos o recursos.
• Registro y perfiles: Como se muestra en los ejemplos anteriores, los decoradores se pueden usar para registrar y perfilar la ejecución del código.
• Gestión de estado: Los decoradores pueden integrarse con bibliotecas de gestión de estado para actualizar automáticamente los componentes cuando cambia el estado.

Beneficios de usar decoradores

• Mejora de la legibilidad del código: Los decoradores proporcionan una sintaxis declarativa para añadir funcionalidad, lo que hace que el código sea más fácil de entender y mantener.
• Separación de responsabilidades: Los decoradores te permiten separar responsabilidades transversales (por ejemplo, registro, validación, autorización) de la lógica de negocio principal.
• Reutilización: Los decoradores se pueden reutilizar en múltiples clases y métodos, reduciendo la duplicación de código.
• Extensibilidad: Los decoradores facilitan la extensión de la funcionalidad del código existente sin modificarlo directamente.

Desafíos y consideraciones

• Curva de aprendizaje: Los decoradores son una característica relativamente nueva, y puede llevar algún tiempo aprender a usarlos de manera efectiva.
• Compatibilidad: Asegúrate de que tu entorno de destino admita decoradores y de que hayas configurado correctamente tus herramientas de compilación.
• Depuración: Depurar código que usa decoradores puede ser más desafiante que depurar código normal, especialmente si los decoradores son complejos.
• Uso excesivo: Evita el uso excesivo de decoradores, ya que esto puede hacer que tu código sea más difícil de entender y mantener. Úsalos estratégicamente para propósitos específicos.
• Sobrecarga en tiempo de ejecución: Los decoradores pueden introducir cierta sobrecarga en tiempo de ejecución, especialmente si realizan operaciones complejas. Considera las implicaciones de rendimiento al usar decoradores en aplicaciones críticas para el rendimiento.

Conclusión

Los decoradores de JavaScript son una herramienta poderosa para mejorar la funcionalidad del código y promover la separación de responsabilidades. Al proporcionar una sintaxis limpia y declarativa para añadir metadatos y transformar clases, métodos, propiedades y parámetros, los decoradores pueden ayudarte a crear bases de código más mantenibles, reutilizables y extensibles. Si bien vienen con una curva de aprendizaje y algunos desafíos potenciales, los beneficios de usar decoradores en el contexto adecuado pueden ser significativos. A medida que el ecosistema de JavaScript continúa evolucionando, es probable que los decoradores se conviertan en una parte cada vez más importante del desarrollo moderno de JavaScript.

Considera explorar cómo los decoradores pueden simplificar tu código existente o permitirte escribir aplicaciones más expresivas y mantenibles. Con una planificación cuidadosa y una sólida comprensión de sus capacidades, puedes aprovechar los decoradores para crear soluciones de JavaScript más robustas y escalables.