Cara Menggunakan Dekorator di TypeScript

Dekorator dalam TypeScript merupakan fitur hebat yang memungkinkan pengembang untuk menambahkan fungsionalitas tambahan ke kelas, metode, properti, dan parameter. Dekorator menyediakan cara untuk mengubah perilaku kode yang ada tanpa mengubah strukturnya yang sebenarnya. Panduan ini akan menjelaskan cara menggunakan dekorator dalam TypeScript dengan contoh yang mudah diikuti.

Apa itu Dekorator?

Dekorator adalah fungsi khusus yang dapat diterapkan pada kelas, metode, properti, atau parameter. Dekorator dipanggil saat runtime dan memungkinkan pengembang untuk membuat anotasi dan memodifikasi kode dengan cara deklaratif. Untuk mengaktifkan dekorator dalam proyek TypeScript, tanda experimentalDecorators harus disetel ke true dalam berkas tsconfig.json.

Mengaktifkan Dekorator di TypeScript

Untuk menggunakan dekorator, kompiler TypeScript harus dikonfigurasi untuk mengenalinya. Ini dapat dilakukan dengan menyetel tanda experimentalDecorators ke true dalam berkas tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Setelah dekorator diaktifkan, mereka dapat digunakan di seluruh proyek.

Membuat Dekorator Kelas

Dekorator kelas diterapkan pada deklarasi kelas dan dapat digunakan untuk mengubah atau mengganti definisi kelas. Dekorator kelas dideklarasikan tepat di atas kelas yang dihiasnya, menggunakan simbol @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

Dalam contoh ini, dekorator LogClass mencatat pesan saat kelas Person dibuat. Dekorator didefinisikan sebagai fungsi yang mengambil satu argumen: konstruktor kelas yang didekorasi.

Dekorator Metode

Dekorator metode diterapkan pada metode dalam suatu kelas. Dekorator ini memungkinkan pengembang untuk mencegat pemanggilan metode, mengubah perilakunya, atau melakukan operasi tambahan sebelum atau setelah metode dijalankan.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Di sini, dekorator LogMethod mencatat nama metode dan argumennya setiap kali metode add dipanggil. Dekorator ini membungkus metode asli dalam fungsi baru yang melakukan pencatatan sebelum mendelegasikan ke metode asli.

Dekorator Properti

Dekorator properti digunakan untuk mengamati atau mengubah perilaku properti kelas. Tidak seperti dekorator metode, mereka tidak memiliki akses ke nilai properti itu sendiri, tetapi mereka dapat menambahkan metadata ke properti.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

Dalam contoh ini, dekorator ReadOnly diterapkan pada properti title dari kelas Book, menjadikannya hanya-baca dengan menetapkan writable ke false.

Dekorator Parameter

Dekorator parameter digunakan untuk memberi anotasi atau mengubah parameter metode. Dekorator menerima tiga argumen: objek target, nama metode, dan indeks parameter.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

Dalam contoh ini, dekorator LogParameter diterapkan pada parameter message dari metode greet di kelas UserService. Dekorator mencatat informasi tentang parameter yang didekorasi.

Kesimpulan

Dekorator dalam TypeScript menawarkan cara yang ampuh untuk meningkatkan fungsionalitas kode tanpa mengubah strukturnya. Dengan memanfaatkan dekorator kelas, metode, properti, dan parameter, pengembang dapat dengan mudah menambahkan fungsionalitas yang dapat digunakan kembali di seluruh proyek mereka. Dengan contoh yang diberikan dalam panduan ini, mudah untuk memulai penggunaan dekorator dalam TypeScript.