Dekorator dalam TypeScript

Artikel ini menjelaskan dekorator dalam TypeScript.

YouTube Video

Dekorator dalam TypeScript

Dekorator TypeScript adalah mekanisme untuk menambah fungsi atau perilaku tambahan pada kelas, metode, akses, properti, atau parameter. Dekorator adalah alat yang kuat untuk meningkatkan keterbacaan dan kegunaan ulang kode.

Dasar-dasar Dekorator

Dekorator adalah fungsi yang menyisipkan fungsi tambahan ke dalam kelas atau anggota kelas. Dekorator diperkenalkan dalam TypeScript 1.5 dan juga telah diusulkan untuk standar ECMAScript.

1{
2  "compilerOptions": {
3    "experimentalDecorators": true
4  }
5}

• Untuk menggunakan dekorator, Anda perlu mengaktifkan opsi experimentalDecorators dalam file tsconfig.json.

Jenis-jenis Dekorator

Dalam TypeScript, Anda dapat menggunakan lima dekorator berikut.

• Dekorator Kelas Dekorator yang diterapkan pada sebuah kelas.
• Dekorator Metode Dekorator yang diterapkan pada metode dari sebuah kelas.
• Dekorator Akses Dekorator yang diterapkan pada getter atau setter dari properti kelas.
• Dekorator Properti Dekorator yang diterapkan pada properti sebuah kelas.
• Dekorator Parameter Dekorator yang diterapkan pada parameter dari sebuah metode.

Dekorator Kelas

Dekorator kelas adalah dekorator yang diterapkan pada kelas. Dekorator kelas ditulis tepat di atas definisi kelas dan dapat mengakses konstruktor kelas. Dekorator kelas terutama digunakan untuk mengubah perilaku kelas atau menambahkan metadata.

 1function Logger(constructor: Function) {
 2    console.log(`Class ${constructor.name} is being constructed`);
 3}
 4
 5@Logger
 6class Person {
 7    constructor(public name: string) {}
 8}
 9
10const person = new Person('John');
11// Output: Class Person is being constructed

Dalam contoh ini, dekorator Logger diterapkan pada kelas, dan pesan ditampilkan di konsol saat kelas diinisialisasi.

Dekorator Metode

Dekorator metode diterapkan pada metode kelas dan dapat mengubah panggilan metode serta perilaku. Sebuah dekorator metode menerima tiga argumen.

1. Prototipe dari kelas
2. Nama dari metode
3. Deskriptor properti dari metode

 1function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalMethod = descriptor.value;
 3
 4    descriptor.value = function (...args: any[]) {
 5        console.time(propertyKey);
 6        const result = originalMethod.apply(this, args);
 7        console.timeEnd(propertyKey);
 8        return result;
 9    };
10}
11
12class MathOperations {
13  @LogExecutionTime
14  add(a: number, b: number): number {
15    return a + b;
16  }
17}
18
19const math = new MathOperations();
20math.add(2, 3);
21// Output: add: 0.000ms (execution time is displayed)

Pada contoh ini, dekorator LogExecutionTime diterapkan pada metode, dan waktu eksekusi dari metode tersebut dicatat.

Dekorator Akses

Dekorator akses diterapkan pada getter atau setter dari properti kelas. Dekorator akses berguna untuk menambahkan perilaku ketika mengubah nilai properti.

 1function LogAccess(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalGet = descriptor.get;
 3    const originalSet = descriptor.set;
 4
 5    if (originalGet) {
 6        descriptor.get = function () {
 7            console.log(`Getter called for ${propertyKey}`);
 8            return originalGet.call(this);
 9        };
10    }
11
12    if (originalSet) {
13        descriptor.set = function (value: any) {
14            console.log(`Setter called for ${propertyKey} with value: ${value}`);
15            originalSet.call(this, value);
16        };
17    }
18}
19
20class Car {
21    private _speed: number = 0;
22
23    @LogAccess
24    get speed() {
25        return this._speed;
26    }
27
28    set speed(value: number) {
29        this._speed = value;
30    }
31}
32
33const car = new Car();
34car.speed = 120;               // Setter called for speed with value: 120
35console.log(car.speed);       // Getter called for speed → 120

Dalam contoh ini, sebuah dekorator akses digunakan untuk mencatat output ketika getter dan setter dipanggil.

Dekorator Properti

Dekorator properti diterapkan pada properti kelas tetapi tidak dapat langsung mengubah nilai atau perilaku properti tersebut. Dekorator properti digunakan untuk mendapatkan metadata dari properti.

 1function Readonly(target: any, propertyKey: string) {
 2    Object.defineProperty(target, propertyKey, {
 3        writable: false
 4    });
 5}
 6
 7class Book {
 8    @Readonly
 9    title: string = "TypeScript Guide";
10}
11
12const book = new Book();
13book.title = "New Title"; // Error: Cannot assign to read only property 'title'

Pada contoh ini, dekorator Readonly diterapkan pada properti title, dan properti tersebut dibuat hanya-baca.

Dekorator Parameter

Dekorator parameter diterapkan pada parameter suatu metode. Dekorator parameter biasanya digunakan untuk menyimpan metadata atau memvalidasi parameter. Dekorator menerima tiga argumen.

1. Prototipe dari kelas
2. Nama dari metode
3. Indeks Parameter

 1function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
 2    console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} was decorated.`);
 3}
 4
 5class User {
 6    greet(@LogParameter message: string) {
 7        console.log(message);
 8    }
 9}
10
11const user = new User();
12user.greet('Hello!');
13// Output: Parameter at index 0 in method greet was decorated.

Pada contoh ini, dekorator LogParameter diterapkan pada parameter pertama dari metode greet, dan ketika metode tersebut dipanggil, ia mencatat bahwa parameter tersebut terdekorasi.

Contoh Praktis dari Dekorator

Dekorator banyak digunakan dalam kerangka kerja seperti Angular, terutama untuk injeksi dependensi dan definisi metadata. Sebagai contoh, gunakan dekorator @Component untuk mendefinisikan komponen Angular seperti berikut.

1@Component({
2    selector: 'app-root',
3    template: '<h1>Hello World</h1>',
4})
5export class AppComponent {}

Oleh karena itu, dekorator sering digunakan sebagai bagian inti dari kerangka kerja dan pustaka, membantu menjaga kode tetap ringkas dan jelas.

Ringkasan tentang Dekorator

Dekorator TypeScript adalah alat yang kuat untuk menambahkan fungsionalitas secara fleksibel pada kelas, metode, dan properti. Menggunakan dekorator kustom meningkatkan pemeliharaan dan kegunaan ulang kode, memungkinkan abstraksi lebih lanjut. Decorator memainkan peran penting dalam kerangka kerja seperti Angular dan NestJS, dan memahaminya membantu memahami secara mendalam cara kerja kerangka kerja ini.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video