Pengenalan Decorators

Apa Itu Decorator

Decorator adalah anotasi khusus dengan awalan @ yang menempel pada class, method, atau properti untuk menambah perilaku:

function Log(target: unknown, nama: string, descriptor: PropertyDescriptor) {
  const asli = descriptor.value;
  descriptor.value = function (...args: unknown[]) {
    console.log(`Memanggil ${nama}`, args);
    return asli.apply(this, args);
  };
}

class Kalkulator {
  @Log
  tambah(a: number, b: number): number {
    return a + b;
  }
}

new Kalkulator().tambah(2, 3);
// log: Memanggil tambah [2, 3]

Tanpa mengubah isi method tambah, decorator menyisipkan logging. Pola ini dipakai framework seperti NestJS (@Controller, @Get) dan Angular.

Mengaktifkan Decorator

Decorator masih eksperimental di TypeScript dan harus diaktifkan di tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Tanpa flag ini, sintaks @ langsung error. emitDecoratorMetadata dibutuhkan framework yang membaca tipe parameter via reflection (seperti NestJS dependency injection).

Jenis-Jenis Decorator

• Class decorator: menerima constructor class. Dipakai untuk mendaftarkan class ke registry atau menambah metadata.
• Method decorator: menerima target, nama method, dan property descriptor seperti contoh di atas. Paling sering dipakai untuk logging, caching, atau validasi.
• Property & parameter decorator: menempel pada field atau parameter, umumnya untuk validasi atau injeksi dependency.

Kapan Memakai, Kapan Menghindari

Pakai decorator saat memakai framework yang dirancang di sekitarnya (NestJS, TypeORM). Untuk kode aplikasi biasa, fungsi higher-order atau wrapper biasa sering lebih sederhana dan lebih mudah di-debug.

// tanpa decorator, efek yang sama:
const tambahDenganLog = denganLog((a: number, b: number) => a + b);

Catatan teknis: Standar decorator JavaScript (stage 3) berbeda dari decorator eksperimental TypeScript yang lama, dan TypeScript 5 mendukung sintaks standar dengan perilaku yang tidak identik. Artinya contoh decorator dari tutorial lama bisa tidak jalan di setup baru dan sebaliknya. Selalu cek decorator API mana yang dipakai versi TypeScript dan framework-mu sebelum copy-paste contoh dari internet.