Saltar al contenido principal
Volver a Patrones y Buenas Prácticas

Patrones y Buenas Prácticas — Leccion 4

·20 min

Decorators

Modifica clases y métodos de forma declarativa.

Decorators

Los decorators son funciones que modifican clases, métodos, propiedades o parámetros.

typescript
function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Llamando a ${key} con`, args);
    return original.apply(this, args);
  };
}

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

new Calculadora().sumar(1, 2); // Log: llamando a sumar con [1, 2]

Habilitar decorators

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

Tipos de decorators

typescript
// Class decorator
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

// Property decorator
function minLength(largo: number) {
  return (target: any, key: string) => {
    // ...
  };
}

// Method decorator
function debounce(ms: number) {
  return (target: any, key: string, descriptor: PropertyDescriptor) => {
    // ...
  };
}

Ejemplo real

typescript
function autorizado(roles: string[]) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args: any[]) {
      const usuario = args[0];
      if (!roles.includes(usuario.rol)) {
        throw new Error("No autorizado");
      }
      return original.apply(this, args);
    };
  };
}

class Admin {
  @autorizado(["admin"])
  eliminarUsuario(usuario: any) {
    return "Usuario eliminado";
  }
}

Ejercicio pratico

Crea un decorator @log que registre las llamadas a funciones.

exercise.ts
Loading...
Resultado

Haz clic en "Ejecutar" para ver el resultado...

Curso de TypeScript — Aprende desde cero