Comprensión de los decoradores de TypeScript

Los decoradores de TypeScript proporcionan una forma eficaz de agregar funcionalidad a clases, métodos, propiedades y parámetros en tiempo de ejecución. Suelen utilizarse en marcos como Angular para inyección de dependencias, registro, validación y más. En este artículo se explicarán los diferentes tipos de decoradores en TypeScript y cómo utilizarlos de forma eficaz.

¿Qué son los decoradores de TypeScript?

Los decoradores en TypeScript son funciones que tienen como prefijo el símbolo @ y se pueden adjuntar a varios elementos, como clases, métodos o propiedades. Permiten modificar el comportamiento del código al que están adjuntados, sin alterar el código directamente.

Tipos de decoradores

• Decoradores de clase: Se aplica a una clase entera.
• Decoradores de métodos: Se aplica a un método dentro de una clase.
• Decoradores de propiedad: Se aplica a una propiedad en una clase.
• Decoradores de parámetros: Se aplica a los parámetros de un método en una clase.

Cómo habilitar decoradores en TypeScript

Antes de poder usar decoradores, asegúrese de habilitarlos en su archivo tsconfig.json configurando "experimentalDecorators" en true.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Decoradores de clases

Un decorador de clase se aplica a una clase entera. Resulta útil para agregar metadatos o modificar el comportamiento de una clase.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Decoradores de métodos

Los decoradores de métodos se aplican a los métodos dentro de una clase. Estos decoradores se pueden utilizar para modificar o registrar el comportamiento de un método.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Decoradores de propiedades

Los decoradores de propiedades se utilizan para agregar funcionalidad a las propiedades de una clase. Pueden ser útiles para la validación o para agregar metadatos a una propiedad.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Decoradores de parámetros

Los decoradores de parámetros se utilizan para modificar o registrar información sobre los parámetros del método.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Conclusión

Los decoradores en TypeScript proporcionan una forma eficaz de mejorar la funcionalidad de su código sin modificar su estructura. Si comprende cómo utilizar los decoradores de clases, métodos, propiedades y parámetros, podrá implementar funciones avanzadas como registro, validación e inyección de dependencias. Los decoradores son una característica clave en TypeScript que puede mejorar enormemente su flujo de trabajo de desarrollo, especialmente en aplicaciones de gran tamaño.