TypeScript 5: ECMAScript Decorators Guide

TypeScript 5 brings official support for ECMAScript decorators, enabling powerful meta-programming capabilities.

What are Decorators?

Decorators are special functions that can modify classes, methods, properties, and parameters at design time.

Class Decorators

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}
@sealed
class BugReport {
  type = "report";
  title: string;
  constructor(t: string) {
    this.title = t;
  }
}

Method Decorators

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(Calling ${propertyKey} with:, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}
class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

Common Use Cases

• 1. Logging and debuggingLogging and debugging
• 2. ValidationValidation
• 3. Dependency injectionDependency injection
• 4. Authentication and authorizationAuthentication and authorization

Best Practices

• •Keep decorators simple and focused
• •Document decorator behavior clearly
• •Consider performance implications