TypeScript'te Dekoratörler

Bu makale, TypeScript'teki dekoratörleri açıklar.

YouTube Video

TypeScript'te Dekoratörler

TypeScript dekoratörleri, sınıflara, metodlara, erişimcilere, özelliklere veya parametrelere ek işlevsellik veya davranış eklemek için bir mekanizmadır. Dekoratörler, kod okunabilirliğini ve tekrar kullanılabilirliğini artırmak için güçlü bir araçtır.

Dekoratörlerin Temelleri

Bir dekoratör, bir sınıfa veya sınıf üyelerine ek işlevsellik ekleyen bir fonksiyondur. Dekoratörler TypeScript 1.5'te tanıtıldı ve ECMAScript standardı için de önerildi.

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

• Dekoratörleri kullanmak için, tsconfig.json dosyasındaki experimentalDecorators seçeneğini etkinleştirmeniz gerekir.

Dekoratör Türleri

TypeScript'te aşağıdaki beş dekoratörü kullanabilirsiniz.

• Sınıf Dekoratörü Bir sınıfa uygulanan bir dekoratör.
• Metot Dekoratörü Bir sınıfın metoduna uygulanan bir dekoratör.
• Erişimci Dekoratörü Bir sınıf özelliğinin getter veya setter'ına uygulanan bir dekoratör.
• Özellik Dekoratörü Bir sınıfın özelliğine uygulanan bir dekoratör.
• Parametre Dekoratörü Bir metodun parametresine uygulanan bir dekoratör.

Sınıf Dekoratörü

Sınıf dekoratörleri, sınıflara uygulanan dekoratörlerdir. Sınıf dekoratörleri, sınıf tanımının hemen üzerine yazılır ve sınıf yapıcısına erişebilir. Genellikle sınıf davranışını değiştirmek veya meta veriler eklemek için kullanılırlar.

 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

Bu örnekte, Logger dekoratörü sınıfa uygulanır ve sınıf başlatıldığında konsola bir mesaj gösterilir.

Metot Dekoratörü

Metot dekoratörleri sınıf metotlarına uygulanır ve metot çağrılarını ve davranışını değiştirebilir. Bir metot dekoratörü üç argüman alır.

1. Sınıfın prototipi
2. Metodun adı
3. Metodun özellik tanımlayıcısı

 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)

Bu örnekte, LogExecutionTime dekoratörü metoda uygulanır ve metodun çalışma süresi kaydedilir.

Erişimci Dekoratörü

Erişimci dekoratörler, sınıf özelliklerinin getter veya setterlarına uygulanır. Özellik değerleri değiştirilirken davranış eklemek için kullanışlıdırlar.

 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

Bu örnekte, getter ve setter çağrıldığında çıktı kaydetmek için bir erişimci (accessor) dekoratörü kullanılır.

Özellik Dekoratörü

Özellik dekoratörleri, sınıf özelliklerine uygulanır ancak özelliğin değerini veya davranışını doğrudan değiştiremez. Özelliklerin meta verilerini elde etmek için kullanılırlar.

 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'

Bu örnekte, title özelliğine Readonly dekoratörü uygulanmıştır ve bu özellik salt okunur hale getirilmiştir.

Parametre Dekoratörü

Parametre dekoratörleri bir metodun parametrelerine uygulanır. Genellikle meta verileri saklamak veya parametreleri doğrulamak için kullanılırlar. Dekoratörler üç argüman alır.

1. Sınıfın prototipi
2. Metodun adı
3. Parametre İndeksi

 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.

Bu örnekte, LogParameter dekoratörü greet metodunun ilk parametresine uygulanmıştır ve metod çağrıldığında, parametrenin dekoratörlü olduğu kaydedilir.

Dekoratörlerin Pratik Örnekleri

Dekoratörler, özellikle bağımlılık enjeksiyonu ve meta veri tanımı için Angular gibi frameworklerde yaygın olarak kullanılır. Örneğin, aşağıdaki gibi Angular bileşenlerini tanımlamak için @Component dekoratörünü kullanabilirsiniz.

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

Bu nedenle dekoratörler genellikle framework ve kütüphanelerin temel parçaları olarak kullanılır ve kodu öz ve net tutmaya yardımcı olur.

Dekoratörlerin Özeti

TypeScript dekoratörleri, sınıflara, metodlara ve özelliklere esnek bir şekilde işlevsellik ekleyen güçlü araçlardır. Özel dekoratörler kullanmak, kodun sürdürülebilirliğini ve yeniden kullanılabilirliğini artırır ve daha fazla soyutlamaya olanak tanır. Dekoratörler, Angular ve NestJS gibi frameworklerde önemli bir rol oynar ve onları anlamak, bu frameworklerin nasıl çalıştığını derinlemesine anlamaya yardımcı olur.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video