43. Decorators (experimental & stage-3)

Decorators are functions applied to classes, methods, or properties with an `@` prefix, letting you wrap or annotate behaviour declaratively. TypeScript has long supported an experimental decorator proposal, and modern TypeScript also supports the newer, standardized (stage-3 / ES) decorators.

ts
function logCall(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class Vault {
  @logCall
  withdraw(amount: number) {
    return amount;
  }
}

Decorators are widely used by frameworks (Angular, NestJS, TypeORM) for dependency injection and metadata (`@Injectable()`, `@Column()`). They require enabling `experimentalDecorators` for the legacy proposal, or targeting a recent `target`/`tsconfig` setup for the newer standardized syntax; the two are not fully interchangeable.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges