Decorator adalah fungsi yang "menempel" pada class, method, atau property untuk menambah perilaku tanpa mengubah kode aslinya. Kamu mungkin sudah lihat di framework seperti Angular (@Component), NestJS (@Controller), atau TypeORM (@Entity).

TypeScript 5.0+ mendukung Stage 3 decorators (standar ECMAScript). Penulisannya pakai prefix @.

Class decorator — tambah perilaku ke class:

function Logger<T extends new (...args: any[]) => any>(target: T, _ctx: any) {
  return class extends target {
    constructor(...args: any[]) {
      super(...args);
      console.log(`[NEW] ${target.name} dibuat`);
    }
  };
}

@Logger
class Mobil {
  constructor(public merk: string) {}
}

new Mobil("Toyota"); // console: [NEW] Mobil dibuat

Method decorator — hias method:

function Measure(_target: any, ctx: ClassMethodDecoratorContext) {
  return function (this: any, ...args: any[]) {
    const mulai = performance.now();
    const hasil = (ctx.access as any).get(this).apply(this, args);
    console.log(`${String(ctx.name)}: ${performance.now() - mulai}ms`);
    return hasil;
  };
}

class Api {
  @Measure
  ambilData() { /* ... */ }
}

Konfigurasi tsconfig:

{
  "compilerOptions": {
    "target": "ES2022",
    "experimentalDecorators": false  // pakai Stage 3 decorators (default di TS 5+)
  }
}

⚠️ Hati-hati: banyak library lama (Angular, TypeORM, NestJS) masih menuntut experimentalDecorators: true — decorator mereka pakai versi lama yang berbeda. Cek dokumentasi library sebelum migrasi ke decorator modern.