sábado 14 septiembre 2024

Cómo utilizar decoradores en TypeScript

¿Qué son los decoradores en TypeScript?

Los decoradores en TypeScript son funciones especiales que permiten modificar el comportamiento de clases, métodos, propiedades o parámetros. Son utilizados principalmente para añadir metadatos o aplicar lógica adicional de forma declarativa. Los decoradores se activan utilizando el símbolo @ y deben estar habilitados en el tsconfig.json del proyecto mediante la opción experimentalDecorators.

Configuración para habilitar decoradores

Primero, asegúrate de habilitar los decoradores en tu archivo tsconfig.json:

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

Tipos de decoradores

Existen cuatro tipos principales de decoradores en TypeScript:

1. Decoradores de clase

2. Decoradores de método

3. Decoradores de propiedad

4. Decoradores de parámetro

Sintaxis básica

function DecoradorDeEjemplo(target: any) {
  // Lógica del decorador
}

El target representa el objeto al que se aplica el decorador (clase, método, propiedad o parámetro).

Algunos ejemplos de uso de decoradores en TypeScript

Ejemplo 1: Decorador de clase

Un decorador de clase se utiliza para añadir o modificar el comportamiento de una clase completa.

function LogClase(constructor: Function) {
  console.log("Clase creada: " + constructor.name);
}

@LogClase
class Persona {
  constructor(public nombre: string) {}
}

const persona = new Persona("Juan");
// Resultado: Clase creada: Persona

Ejemplo 2: Decorador de método

Este decorador se aplica a los métodos de una clase. Aquí se añade un log cuando se invoca el método.

function LogMetodo(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const metodoOriginal = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Método ${propertyKey} llamado con argumentos: ${args}`);
    return metodoOriginal.apply(this, args);
  };
}

class Calculadora {
  @LogMetodo
  sumar(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculadora();
calc.sumar(2, 3);
// Resultado: Método sumar llamado con argumentos: 2,3

Ejemplo 3: Decorador de propiedad

Este decorador permite modificar o registrar el uso de una propiedad.

function LogPropiedad(target: any, propertyKey: string) {
  let valor = target[propertyKey];

  const getter = () => {
    console.log(`Accediendo a ${propertyKey}: ${valor}`);
    return valor;
  };

  const setter = (nuevoValor: any) => {
    console.log(`Asignando a ${propertyKey}: ${nuevoValor}`);
    valor = nuevoValor;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
  });
}

class Vehiculo {
  @LogPropiedad
  public modelo: string;

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

const coche = new Vehiculo("Toyota");
coche.modelo = "Honda";
// Resultado: Asignando a modelo: Honda

Referencia oficial

Para más información, consulta la documentación oficial de TypeScript sobre decoradores.

Etiquetas:

typescript

Creado por:

Jorge García

Fullstack developer