Pengantar Dekorator

Dekorator dalam TypeScript adalah fungsi khusus yang memungkinkan Anda menambahkan metadata atau mengubah perilaku kelas, metode, dan properti.

Dekorator sering digunakan dalam kerangka kerja seperti Angular untuk menyederhanakan pengembangan.

Cara Kerja Dekorator

Dekorator adalah fungsi yang diterapkan pada suatu kelas atau anggotanya (metode, properti, dan sebagainya).

Misalnya, @Component dalam Angular adalah dekorator yang menambahkan metadata ke suatu kelas untuk menetapkannya sebagai komponen.

Menggunakan Dekorator Bawaan

TypeScript memiliki dekorator bawaan seperti:

• @readonly: Menjadikan properti hanya-baca.
• @enumerable: Mengontrol apakah suatu properti dapat dienumerasi.

Dekorator ini membantu mengubah perilaku properti atau metode secara langsung.

Membuat Dekorator Sederhana

Anda dapat membuat dekorator sendiri untuk mencatat pesan atau menambahkan fungsionalitas:

Terapkan pada properti: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Dekorator Kelas

Dekorator kelas digunakan untuk mengubah atau menyempurnakan perilaku seluruh kelas:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Terapkan pada kelas: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Dekorator Metode

Dekorator metode mengubah perilaku suatu metode kelas:

Gunakan pada metode: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Menggunakan Dekorator dalam Angular

Angular sangat mengandalkan dekorator untuk menambahkan metadata ke komponennya:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Dekorator @Component menetapkan kelas tersebut sebagai komponen Angular.

Praktik Terbaik dalam Menggunakan Dekorator

Saat menggunakan dekorator:

• Buat dekorator tetap sederhana dan terfokus.
• Gunakan dekorator untuk metadata, bukan untuk logika yang kompleks.
• Manfaatkan dekorator bawaan jika memungkinkan untuk menghemat waktu.

Selamat!

Anda telah mempelajari cara kerja dekorator dalam TypeScript dan cara menggunakannya untuk mengubah atau menyempurnakan kode Anda. Teruslah bereksperimen dengan dekorator agar mahir menggunakannya dalam proyek Anda!