Dalam pengembangan aplikasi modern berbasis TypeScript, konsep dekorator TypeScript menjadi salah satu fitur canggih yang banyak digunakan, terutama dalam framework seperti Angular dan NestJS. Dekorator memberikan cara elegan untuk menambahkan fungsionalitas tambahan ke class, method, atau properti tanpa perlu mengubah logika utama secara langsung.
Fitur ini memungkinkan pengembang menulis kode yang lebih declarative, mudah dibaca, dan terorganisir. Dengan menggunakan dekorator, kamu bisa menambahkan metadata, logging otomatis, validasi, hingga dependency injection secara efisien. Pada artikel ini, kita akan membahas secara mendalam tentang dekorator TypeScript, mencakup class, method, dan property decorator, serta melihat contoh implementasinya di framework NestJS.
Apa Itu Dekorator dalam TypeScript?
Dekorator adalah fungsi khusus yang digunakan untuk menambahkan metadata atau memodifikasi perilaku dari class, method, property, atau parameter. Secara teknis, dekorator adalah fungsi yang dijalankan saat class atau elemennya didefinisikan, bukan saat runtime utama aplikasi berjalan.
Agar dapat menggunakan dekorator, pastikan kamu mengaktifkan fitur ini di file tsconfig.json:
{
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
Jenis-Jenis Dekorator TypeScript
TypeScript mendukung beberapa jenis dekorator, antara lain:
-
Class Decorator
-
Property Decorator
-
Method Decorator
-
Parameter Decorator
Mari kita bahas tiga yang paling umum digunakan.
1. Class Decorator
Digunakan untuk menambahkan metadata atau mengubah perilaku class. Dekorator ini menerima parameter berupa constructor function dari class yang didekorasi.
function Logger(constructor: Function) {
console.log(`Class ${constructor.name} telah didefinisikan.`);
}
@Logger
class ProductService {
constructor() {
console.log("ProductService berjalan...");
}
}
Penjelasan:
Saat class ProductService didefinisikan, dekorator Logger dijalankan dan mencetak nama class ke konsol.
2. Property Decorator
Dekorator properti digunakan untuk menambahkan perilaku khusus atau validasi pada properti class.
function Readonly(target: any, propertyKey: string) {
Object.defineProperty(target, propertyKey, {
writable: false
});
}
class User {
@Readonly
role = "admin";
}
const user = new User();
user.role = "member"; // Tidak akan berubah karena properti readonly
console.log(user.role); // "admin"
Penjelasan:
Dekorator Readonly membuat properti role menjadi tidak dapat diubah setelah dideklarasikan.
3. Method Decorator
Dekorator ini digunakan untuk menambahkan atau mengubah perilaku pada method tertentu, misalnya logging otomatis atau pengukuran waktu eksekusi.
function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.time(propertyKey);
const result = original.apply(this, args);
console.timeEnd(propertyKey);
return result;
};
}
class Calculator {
@LogExecutionTime
sum(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
calc.sum(5, 10);
Penjelasan:
Dekorator LogExecutionTime menghitung waktu eksekusi method sum dan mencetaknya ke konsol.
Implementasi Dekorator di Framework NestJS
Salah satu framework yang banyak memanfaatkan dekorator TypeScript adalah NestJS. Framework ini menggunakan dekorator untuk berbagai hal seperti routing, dependency injection, dan metadata pengendalian alur aplikasi.
Contoh: Controller dan Service di NestJS
import { Controller, Get, Injectable } from '@nestjs/common';
@Injectable()
class ProductService {
getAll() {
return ['Laptop', 'Keyboard', 'Mouse'];
}
}
@Controller('products')
class ProductController {
constructor(private readonly productService: ProductService) {}
@Get()
findAll() {
return this.productService.getAll();
}
}
Penjelasan:
-
@Injectable()→ menandai classProductServiceagar dapat digunakan oleh sistem dependency injection. -
@Controller()→ mendefinisikan endpoint HTTP. -
@Get()→ mendekorasi method agar berfungsi menangani request HTTP GET.
Dekorator dalam NestJS membuat kode lebih terstruktur dan deklaratif, sehingga mudah dibaca dan dipelihara bahkan untuk proyek besar.
Kapan Harus Menggunakan Dekorator?
Gunakan dekorator ketika kamu ingin:
-
Menambahkan metadata tanpa mengubah kode utama.
-
Mengimplementasikan cross-cutting concerns seperti logging, validasi, atau authorization.
-
Membuat sistem yang declarative dan terorganisir, seperti pada framework NestJS dan Angular.
Namun, hindari penggunaan berlebihan, karena dekorator yang kompleks bisa menyulitkan debugging dan tracing alur kode.
Kesimpulan
Dekorator TypeScript adalah fitur powerful yang memungkinkan developer menambahkan logika tambahan ke class, method, dan property dengan cara yang efisien dan bersih. Dengan memahami berbagai jenis dekorator — mulai dari class hingga method decorator — kamu bisa membuat kode yang modular dan mudah dikelola.
Framework seperti NestJS telah membuktikan bahwa dekorator dapat meningkatkan produktivitas dan keterbacaan kode. Jadi, jika kamu ingin naik level dalam pengembangan berbasis TypeScript, memahami dan menguasai dekorator adalah langkah penting yang wajib kamu kuasai.