Decorators - Decoradores

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: 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

Apr 20, 2025 - 04:59

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:

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