TypeScript Decorators & Metadata (TS 5.0+)

1. Class Aspect Interception

A Decorator is a special syntax (@decoratorName) that allows you to attach reusable aspect-oriented behavior (logging, validation, auto-binding) to classes, methods, fields, and accessors.

2. Modern Standard Decorators (TS 5.0+)

TypeScript 5.0 introduced support for the official Stage 3 ECMAScript Decorator standard without needing legacy experimentalDecorators flags!

3. Method Decorator Example

A method decorator receives the original target function and a ClassMethodDecoratorContext object:

// Method Logger Decorator
function loggedMethod<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
  const methodName = String(context.name);

  return function (this: This, ...args: Args): Return {
    console.log(`[LOG]: Entering method '${methodName}'...`);
    const result = target.call(this, ...args);
    console.log(`[LOG]: Exiting method '${methodName}'.`);
    return result;
  };
}

class UserService {
  @loggedMethod
  public deleteUser(id: string) {
    console.log("Deleting user:", id);
  }
}

const service = new UserService();
service.deleteUser("usr_42");
// Output:
// [LOG]: Entering method 'deleteUser'...
// Deleting user: usr_42
// [LOG]: Exiting method 'deleteUser'.

4. Common Mistakes

• Mixing Legacy and Modern Decorators: Modern TS 5.0 decorators do NOT use experimentalDecorators: true. Avoid mixing legacy experimental decorator syntax with modern standard decorators!

5. Next Steps

Use decorators for clean aspect logging and ORM entity mapping. Next, let's finish our 30-lesson track with Project References and Monorepos!