Propuesta de Decoradores de JavaScript: Mejora de Métodos y Anotación de Metadatos

JavaScript, como lenguaje dinámico y en constante evolución, busca continuamente formas de mejorar la legibilidad, mantenibilidad y extensibilidad del código. Una de las características más esperadas para abordar estos aspectos es la propuesta de Decoradores. Este artículo ofrece una visión general completa de los Decoradores de JavaScript, explorando su sintaxis, capacidades e impacto potencial en el desarrollo moderno de JavaScript. Aunque actualmente es una propuesta en Etapa 3, los decoradores ya se utilizan ampliamente en frameworks como Angular y son cada vez más adoptados a través de transpiladores como Babel. Esto hace que entenderlos sea crucial para cualquier desarrollador de JavaScript moderno.

¿Qué son los decoradores de JavaScript?

Los decoradores son un patrón de diseño tomado de otros lenguajes como Python y Java. En esencia, son un tipo especial de declaración que puede adjuntarse a una clase, método, accesor, propiedad o parámetro. Los decoradores utilizan la sintaxis @expresion, donde expresion debe evaluarse como una función que será llamada en tiempo de ejecución con información sobre la declaración decorada.

Piense en los decoradores como una forma de agregar funcionalidad o metadatos adicionales al código existente sin modificarlo directamente. Esto promueve una base de código más declarativa y mantenible.

Sintaxis y Uso Básico

Un decorador simple es una función que toma uno, dos o tres argumentos dependiendo de lo que esté decorando:

• Para un decorador de clase, el argumento es el constructor de la clase.
• Para un decorador de método o accesor, los argumentos son el objeto de destino (ya sea el prototipo de la clase o el constructor de la clase para miembros estáticos), la clave de la propiedad (el nombre del método o accesor) y el descriptor de la propiedad.
• Para un decorador de propiedad, los argumentos son el objeto de destino y la clave de la propiedad.
• Para un decorador de parámetro, los argumentos son el objeto de destino, la clave de la propiedad y el índice del parámetro en la lista de parámetros de la función.

Decoradores de Clase

Un decorador de clase se aplica al constructor de la clase. Se puede usar para observar, modificar o reemplazar la definición de una clase. Un caso de uso común es registrar una clase dentro de un framework o biblioteca.

Ejemplo: Registrar Instanciaciones de Clase

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`New instance of ${constructor.name} created.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Hello, Decorators!"); // Salida: New instance of MyClass created.
            

              
                Copy
              
            
          

En este ejemplo, el decorador logClass modifica el constructor de MyClass para registrar un mensaje cada vez que se crea una nueva instancia.

Decoradores de Método

Los decoradores de método se aplican a los métodos dentro de una clase. Se pueden usar para observar, modificar o reemplazar el comportamiento de un método. Esto es útil para cosas como registrar llamadas a métodos, validar argumentos o implementar el almacenamiento en caché.

Ejemplo: Registrar Llamadas a Métodos

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

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

 return descriptor;
}

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

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Salida: Calling method add with arguments: [5,3]
 // Salida: Method add returned: 8
            

              
                Copy
              
            
          

El decorador logMethod registra los argumentos y el valor de retorno del método add.

Decoradores de Accesor

Los decoradores de accesor son similares a los decoradores de método, pero se aplican a los métodos getter o setter. Se pueden usar para controlar el acceso a las propiedades o agregar lógica de validación.

Ejemplo: Validar Valores del Setter

            function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalSet = descriptor.set;

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Value must be non-negative.");
 }
 originalSet.call(this, value);
 };
}

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Lanza un error
            

              
                Copy
              
            
          

El decorador validate asegura que el setter de celsius solo acepte valores no negativos.

Decoradores de Propiedad

Los decoradores de propiedad se aplican a las propiedades de la clase. Se pueden usar para definir metadatos sobre la propiedad o para modificar su comportamiento.

Ejemplo: Definir una Propiedad Requerida

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Missing required property: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Lanza un error: Missing required property: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

El decorador required marca la propiedad name como requerida. Luego, el constructor verifica si todas las propiedades requeridas están presentes.

Decoradores de Parámetro

Los decoradores de parámetro se aplican a los parámetros de una función. Se pueden usar para agregar metadatos sobre el parámetro o para modificar su comportamiento. Son menos comunes que otros tipos de decoradores.

Ejemplo: Inyectar Dependencias

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Connecting to the database...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Fetching user with ID: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

En este ejemplo, estamos usando reflect-metadata (una práctica común cuando se trabaja con inyección de dependencias en JavaScript/TypeScript). El decorador @Inject le dice al constructor de UserService que inyecte una instancia de DatabaseService. Si bien el ejemplo anterior no puede ejecutarse completamente sin una configuración adicional, demuestra el efecto deseado.

Casos de Uso y Beneficios

Los decoradores ofrecen una serie de beneficios y pueden aplicarse a diversos casos de uso:

• Anotación de Metadatos: Los decoradores se pueden usar para adjuntar metadatos a clases, métodos y propiedades. Estos metadatos pueden ser utilizados por frameworks y bibliotecas para proporcionar funcionalidades adicionales, como inyección de dependencias, enrutamiento y validación.
• Programación Orientada a Aspectos (AOP): Los decoradores pueden implementar conceptos de AOP como el registro (logging), la seguridad y la gestión de transacciones al envolver métodos con comportamiento adicional.
• Reutilización de Código: Los decoradores promueven la reutilización del código al permitirle extraer funcionalidades comunes en decoradores reutilizables.
• Mejora de la Legibilidad: Los decoradores hacen que el código sea más legible y declarativo al separar responsabilidades y reducir el código repetitivo (boilerplate).
• Integración con Frameworks: Los decoradores se utilizan ampliamente en frameworks populares de JavaScript como Angular, NestJS y MobX para proporcionar una forma más declarativa y expresiva de definir componentes, servicios y otros conceptos específicos del framework.

Ejemplos del Mundo Real y Consideraciones Internacionales

Si bien los conceptos centrales de los decoradores siguen siendo los mismos en diferentes contextos de programación, su aplicación puede variar según el framework o la biblioteca específica utilizada. Aquí hay algunos ejemplos:

• Angular (Desarrollado por Google, usado globalmente): Angular utiliza decoradores de forma intensiva para definir componentes, servicios y directivas. Por ejemplo, el decorador @Component se utiliza para definir un componente de interfaz de usuario con su plantilla, estilos y otros metadatos. Esto permite a los desarrolladores de diversos orígenes crear y gestionar fácilmente interfaces de usuario complejas utilizando un enfoque estandarizado.

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Component logic here
   }
   
              
  
                
                  Copy
                
              
            

• NestJS (Un framework de Node.js inspirado en Angular, adoptado globalmente): NestJS utiliza decoradores para definir controladores, rutas y módulos. Los decoradores @Controller y @Get se utilizan para definir puntos finales de API y sus manejadores correspondientes. Esto simplifica el proceso de construcción de aplicaciones del lado del servidor escalables y mantenibles, independientemente de la ubicación geográfica del desarrollador.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'This action returns all users';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Una biblioteca de gestión de estado, ampliamente utilizada en aplicaciones de React a nivel mundial): MobX utiliza decoradores para definir propiedades observables y valores calculados. Los decoradores @observable y @computed rastrean automáticamente los cambios en los datos y actualizan la interfaz de usuario en consecuencia. Esto ayuda a los desarrolladores a construir interfaces de usuario receptivas y eficientes para audiencias internacionales, asegurando una experiencia de usuario fluida incluso con flujos de datos complejos.

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

Consideraciones sobre Internacionalización: Al usar decoradores en proyectos dirigidos a una audiencia global, es importante considerar la internacionalización (i18n) y la localización (l10n). Si bien los decoradores en sí mismos no manejan directamente i18n/l10n, pueden usarse para mejorar el proceso al:

• Añadir Metadatos para Traducción: Los decoradores se pueden usar para marcar propiedades o métodos que necesitan ser traducidos. Estos metadatos pueden ser utilizados por bibliotecas de i18n para extraer y traducir el texto relevante.
• Cargar Traducciones Dinámicamente: Los decoradores se pueden usar para cargar traducciones dinámicamente según la configuración regional del usuario. Esto asegura que la aplicación se muestre en el idioma preferido del usuario, independientemente de su ubicación.
• Formatear Fechas y Números: Los decoradores se pueden usar para formatear fechas y números de acuerdo con la configuración regional del usuario. Esto garantiza que las fechas y los números se muestren en un formato culturalmente apropiado.

Por ejemplo, imagine un decorador @Translatable que marca una propiedad como necesitada de traducción. Una biblioteca de i18n podría entonces escanear el código base, encontrar todas las propiedades marcadas con @Translatable y extraer el texto para su traducción. Después de la traducción, la biblioteca puede reemplazar el texto original con la versión traducida según la configuración regional del usuario. Este enfoque promueve un flujo de trabajo de i18n/l10n más organizado y mantenible, especialmente en aplicaciones grandes y complejas.

Estado Actual de la Propuesta y Soporte de Navegadores

La propuesta de Decoradores de JavaScript se encuentra actualmente en la Etapa 3 del proceso de estandarización de TC39. Esto significa que la propuesta es relativamente estable y es probable que se incluya en una futura especificación de ECMAScript.

Aunque el soporte nativo de los navegadores para los decoradores todavía es limitado, se pueden usar en la mayoría de los proyectos modernos de JavaScript utilizando transpiladores como Babel o el compilador de TypeScript. Estas herramientas transforman la sintaxis de los decoradores en código JavaScript estándar que puede ejecutarse en cualquier navegador o entorno de Node.js.

Uso con Babel: Para usar decoradores con Babel, necesita instalar el plugin @babel/plugin-proposal-decorators y configurarlo en su archivo de configuración de Babel (.babelrc o babel.config.js). También es probable que necesite @babel/plugin-proposal-class-properties.

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

Uso con TypeScript: TypeScript tiene soporte incorporado para decoradores. Debe habilitar la opción del compilador experimentalDecorators en su archivo tsconfig.json.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Opcional, pero útil para la inyección de dependencias
 }
 }
 
            

              
                Copy
              
            
          

Tenga en cuenta la opción emitDecoratorMetadata. Esto funciona con bibliotecas como reflect-metadata para habilitar la inyección de dependencias a través de decoradores.

Impacto Potencial y Direcciones Futuras

La propuesta de Decoradores de JavaScript tiene el potencial de impactar significativamente la forma en que escribimos código JavaScript. Al proporcionar una forma más declarativa y expresiva de agregar funcionalidad a clases, métodos y propiedades, los decoradores pueden mejorar la legibilidad, mantenibilidad y reutilización del código.

A medida que la propuesta avance a través del proceso de estandarización y gane una adopción más amplia, podemos esperar ver más frameworks y bibliotecas que adopten los decoradores para proporcionar una experiencia de desarrollo más intuitiva y potente.

Además, las capacidades de metadatos de los decoradores pueden abrir nuevas posibilidades para herramientas y análisis de código. Por ejemplo, los linters y editores de código pueden usar los metadatos de los decoradores para proporcionar sugerencias y mensajes de error más precisos y relevantes.

Conclusión

Los Decoradores de JavaScript son una característica potente y prometedora que puede mejorar significativamente el desarrollo moderno de JavaScript. Al comprender su sintaxis, capacidades y posibles casos de uso, los desarrolladores pueden aprovechar los decoradores para escribir código más mantenible, legible y reutilizable. Aunque el soporte nativo de los navegadores aún está en evolución, los transpiladores como Babel y TypeScript hacen posible usar decoradores en la mayoría de los proyectos de JavaScript hoy en día. A medida que la propuesta avanza hacia la estandarización y gana una adopción más amplia, es probable que los decoradores se conviertan en una herramienta esencial en el arsenal del desarrollador de JavaScript.

Para Aprender Más

• Propuesta de Decoradores de TC39
• Decoradores en TypeScript
• Plugin de Babel para la Propuesta de Decoradores
• reflect-metadata