Los decoradores en TypeScript solo pueden aplicarse a elementos relacionados con clases.

No puedes decorar funciones sueltas o variables fuera de clases.

Puntos clave:

  • Son funciones que se ejecutan en tiempo de definición, no de ejecución.
  • El orden de ejecución importa. Si usas múltiples decoradores, se ejecutan de abajo hacia arriba.
  • Decoradores modernos (context) aún no están 100% estables.
  • Demasiados decoradores mal organizados pueden volver el código menos claro.

Función especial que se aplica con @.

function Log(constructor: Function) {
  console.log(`Clase decorada: ${constructor.name}`);
}

@Log
class App {
  constructor() {
    console.log("App iniciada");
  }
}

new App();

Esto nos mostrara en consola lo siguiente:

Resultado del código anterior

También podemos agregar decoradores a las propiedades de la clase

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

class App {
  @ReadOnly
  version = "1.0.0";

  constructor() {
    console.log("App iniciada");
  }
}

const app = new App();
console.log(app.version);

app.version = "2.0.0"; // No cambia
console.log(app.version);

Si definimos decoradores personalizados, agregando parámetros, es necesario retornar un decorador para que interactúe con las ejecuciones de la clase

function Role(role: string) {
  return function (constructor: Function) {
    constructor.prototype.rol = role;
  };
}

@Role("admin")
class App {}

const app = new App() as any;
console.log(app.rol);

Algunos casos en donde utilizarlos:

  • Útil para debugging y trazabilidad
  • Validar antes de asignar un valor
  • Controlar qué método puede ejecutar cada rol
  • Usado por frameworks como Angular y NestJS
  • Evitar repetir cálculos costosos
  • Transformación automática de datos

Guia rapida de Decoradores