Los decoradores de JavaScript son una característica poderosa que puede simplificar el código y mejorar la legibilidad, especialmente cuando se trabaja con aplicaciones complejas. En este blog, simplificaremos los decoradores con ejemplos prácticos, facilitando a los desarrolladores avanzados su implementación efectiva.

¿Qué son los decoradores de JavaScript?

Los decoradores son una sintaxis especial que se utiliza para modificar clases y sus miembros. Son funciones que se pueden aplicar a clases, métodos o propiedades, lo que le permite ampliar el comportamiento sin modificar directamente el código fuente. Le permiten encapsular lógica como el registro, la validación u otras cuestiones de metanivel de una manera limpia y reutilizable.

¿Por qué utilizar decoradores?

• Lógica reutilizable: Los decoradores le permiten agregar funciones comunes (como registro, validación, etc.) sin repetir el mismo código en su aplicación.

• Legibilidad mejorada: Con los decoradores, puedes encapsular lógica compleja en una sintaxis limpia y declarativa, lo que hace que tu código sea más legible y fácil de mantener.

• Separación de preocupaciones: Puede mantener la lógica empresarial separada de las preocupaciones de nivel meta, como el almacenamiento en caché, la supervisión o el seguimiento del rendimiento.

¿Se pueden utilizar decoradores en JavaScript ahora?

Actualmente, los decoradores no son compatibles de forma nativa con JavaScript. Son una propuesta de la Etapa 3 en el proceso de especificación de ECMAScript, lo que significa que están cerca de convertirse en una característica estándar. Sin embargo, los decoradores aún no forman parte de la especificación oficial de JavaScript, por lo que solo se pueden usar con un transpilador como TypeScript o Babel.

Habilitación de decoradores en TypeScript

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

Esto le permitirá utilizar decoradores en su código TypeScript y TypeScript se encargará de la transpilación a JavaScript.

Habilitando decoradores en Babel

Si estás usando Babel, puedes habilitar decoradores usando el complemento @babel/plugin-proposal-decorators. Para configurarlo, sigue estos pasos:

1.Instale el complemento:

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

2.Añade el complemento a tu configuración de Babel:

 {
     "plugins": [
         ["@babel/plugin-proposal-decorators", { "legacy": true }]
     ]
 }

Esta configuración permitirá a Babel transpilar la sintaxis del decorador a JavaScript estándar.

Ejemplo del mundo real del uso de decoradores

Veamos un ejemplo del mundo real de cómo se pueden usar decoradores para agregar funcionalidad común a clases, métodos y propiedades. Comenzaremos con un decorador de registro simple y un decorador de validación.

Decorador de registros

function logExecution(target, key, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
        console.log(`Method ${key} invoked with arguments:`, args);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class Calculator {
    @logExecution
    add(a, b) {
        return a   b;
    }
}

const calc = new Calculator();
calc.add(5, 7); // Logs: Method add invoked with arguments: [5, 7]

Beneficios clave del uso de decoradores

• Modularización: Los decoradores le permiten separar funciones como el registro, la validación y el monitoreo del rendimiento de la lógica principal de sus clases o métodos.

• Reutilización del código: Al utilizar decoradores, evitas repetir la misma lógica en múltiples métodos o clases.

• Legibilidad: Los decoradores hacen que su código sea más declarativo, lo que permite a otros desarrolladores comprender fácilmente el comportamiento y el propósito de una clase o método de un vistazo.

A medida que los decoradores se acerquen a convertirse en un estándar, seguirán siendo una herramienta esencial para los desarrolladores que buscan mejorar sus aplicaciones JavaScript.

¡Empieza a experimentar con decoradores hoy para mejorar la estructura y la mantenibilidad de tus proyectos!