Memahami Dekorator TypeScript

Dekorator TypeScript menyediakan cara yang ampuh untuk menambahkan fungsionalitas ke kelas, metode, properti, dan parameter saat runtime. Dekorator ini sering digunakan dalam kerangka kerja seperti Angular untuk injeksi dependensi, pencatatan, validasi, dan banyak lagi. Artikel ini akan menjelaskan berbagai jenis dekorator dalam TypeScript dan cara menggunakannya secara efektif.

Apa itu Dekorator TypeScript?

Dekorator dalam TypeScript adalah fungsi yang diawali dengan simbol @ dan dapat dilampirkan ke berbagai elemen seperti kelas, metode, atau properti. Dekorator memungkinkan Anda mengubah perilaku kode yang dilampirkan, tanpa mengubah kode secara langsung.

Jenis Dekorator

• Dekorator Kelas: Diterapkan ke seluruh kelas.
• Dekorator Metode: Diterapkan pada metode dalam kelas.
• Dekorator Properti: Diterapkan pada properti dalam suatu kelas.
• Dekorator Parameter: Diterapkan pada parameter metode dalam kelas.

Cara Mengaktifkan Dekorator di TypeScript

Sebelum Anda dapat menggunakan dekorator, pastikan untuk mengaktifkannya di file tsconfig.json Anda dengan menyetel "experimentalDecorators" ke true.

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

Dekorator Kelas

Dekorator kelas diterapkan ke seluruh kelas. Dekorator ini berguna untuk menambahkan metadata atau mengubah perilaku kelas.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Dekorator Metode

Dekorator metode diterapkan pada metode dalam suatu kelas. Dekorator ini dapat digunakan untuk mengubah atau mencatat perilaku suatu metode.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Dekorator Properti

Dekorator properti digunakan untuk menambahkan fungsionalitas ke properti dalam suatu kelas. Dekorator properti dapat berguna untuk validasi atau menambahkan metadata ke suatu properti.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Dekorator Parameter

Dekorator parameter digunakan untuk mengubah atau mencatat informasi tentang parameter metode.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Kesimpulan

Dekorator dalam TypeScript menyediakan cara yang ampuh untuk meningkatkan fungsionalitas kode Anda tanpa mengubah strukturnya. Dengan memahami cara menggunakan dekorator kelas, metode, properti, dan parameter, Anda dapat menerapkan fitur-fitur canggih seperti pencatatan log, validasi, dan injeksi dependensi. Dekorator adalah fitur utama dalam TypeScript yang dapat meningkatkan alur kerja pengembangan Anda secara signifikan, terutama dalam aplikasi besar.