TypeScript Decorators

TypeScript Decorators: Class, Method, & Parameter Metaprogramming

Decorators provide a declarative syntax to annotate and modify classes, methods, accessors, and fields. TypeScript supports modern TC39 Stage 3 decorators (TS 5.0+) and experimental legacy decorators.

Decorator Target Types

• Class Decorators: Modifies class constructors and prototypes.
• Method Decorators: Intercepts, logs, or mutates class method execution.
• Field Decorators: Intercepts field initialization and accessor binding.

Practical Code Example

// Modern Method Decorator (TS 5.0+)
function AuditLog(originalMethod: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);

  return function (this: any, ...args: any[]) {
    console.log(`[AUDIT LOG] Executing ${methodName} at ${new Date().toISOString()}`);
    const result = originalMethod.apply(this, args);
    console.log(`[AUDIT LOG] Completed ${methodName} cleanly.`);
    return result;
  };
}

class PaymentProcessor {
  @AuditLog
  public processPayment(accountNumber: string, amount: number): boolean {
    console.log(`Processing \$${amount} for account ${accountNumber}...`);
    return true;
  }
}

const processor = new PaymentProcessor();
processor.processPayment("ACC-99182", 450.00);

Best Practices & Gotchas

• Use Modern TS 5.0+ Decorators: Avoid legacy "experimentalDecorators" when starting new projects unless required by legacy frameworks like NestJS or TypeORM.
• Keep Decorators Pure: Decorators should focus on cross-cutting concerns (logging, metadata tagging, validation) without mutating application business logic unexpectedly.
• Type Context Parameters: Utilize built-in decorator context types like ClassMethodDecoratorContext and ClassFieldDecoratorContext.

Self-Check Challenge

What decorator flag is configured in tsconfig.json for legacy Angular / NestJS decorator support? (Answer: "experimentalDecorators": true)