Cara Membuat Dekorator TypeScript Kustom

Dekorator adalah fitur dalam TypeScript yang memungkinkan modifikasi kelas, metode, properti, atau parameter saat runtime. Dekorator adalah fungsi khusus yang menyediakan kemampuan meta-pemrograman. Dalam TypeScript, dekorator sering digunakan dalam kerangka kerja seperti Angular untuk meningkatkan fungsionalitas. Artikel ini menjelaskan cara membuat dekorator kustom langkah demi langkah.

Jenis Dekorator dalam TypeScript

Ada empat jenis dekorator utama di TypeScript:

• Dekorator Kelas
• Dekorator Metode
• Dekorator Aksesori
• Dekorator Properti

Mengaktifkan Dekorator di TypeScript

Untuk menggunakan dekorator dalam proyek TypeScript, opsi experimentalDecorators harus diaktifkan dalam file tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Membuat Dekorator Kelas

Dekorator kelas diterapkan pada konstruktor suatu kelas. Dekorator ini berguna untuk menambahkan metadata atau fungsi ke kelas. Berikut ini contoh cara membuat dekorator kelas sederhana.

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

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

const person = new Person("John");
// Output: Class Person is created

Membuat Dekorator Metode

Dekorator metode diterapkan pada metode kelas. Dekorator ini dapat digunakan untuk mengubah atau mengamati perilaku metode. Berikut ini adalah contoh dekorator metode yang mencatat eksekusi metode.

function logMethod(target: any, 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) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

Membuat Dekorator Properti

Dekorator properti dapat digunakan untuk mengamati atau mengubah properti. Berikut ini contoh di mana dekorator properti memastikan bahwa properti memiliki nilai default.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });
  };
}

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

Membuat Dekorator Parameter

Dekorator parameter diterapkan pada parameter suatu metode. Dekorator ini dapat berguna untuk tugas seperti validasi atau pencatatan argumen. Berikut ini contoh dekorator parameter.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

Kesimpulan

Dekorator dalam TypeScript menawarkan kemampuan meta-pemrograman yang hebat yang dapat meningkatkan dan memperluas fungsionalitas kelas, metode, dan properti. Dengan menggunakan dekorator khusus, Anda dapat membuat struktur kode yang dapat digunakan kembali, efisien, dan terorganisasi. Panduan ini menunjukkan pembuatan berbagai jenis dekorator: kelas, metode, properti, dan parameter.