Özel TypeScript Dekoratörleri Nasıl Oluşturulur

Dekoratörler, TypeScript'te sınıfları, yöntemleri, özellikleri veya parametreleri çalışma zamanında değiştirmeye olanak tanıyan bir özelliktir. Bunlar, meta programlama yetenekleri sağlayan özel işlevlerdir. TypeScript'te dekoratörler, işlevselliği artırmak için genellikle Angular gibi çerçevelerde kullanılır. Bu makale, özel dekoratörlerin adım adım nasıl oluşturulacağını açıklar.

TypeScript'te Dekoratör Türleri

TypeScript'te dört ana dekoratör türü vardır:

• Sınıf Dekoratörleri
• Yöntem Dekoratörleri
• Aksesuar Dekoratörleri
• Emlak Dekoratörleri

TypeScript'te Dekoratörleri Etkinleştirme

TypeScript projesinde dekoratörleri kullanmak için tsconfig.json dosyasında experimentalDecorators seçeneğinin etkinleştirilmesi gerekir.

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

Sınıf Dekoratörü Oluşturma

Sınıf dekoratörleri bir sınıfın kurucusuna uygulanır. Sınıfa meta veri veya işlevsellik eklemek için faydalıdırlar. İşte basit bir sınıf dekoratörünün nasıl oluşturulacağına dair bir örnek.

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

Bir Yöntem Dekoratörü Oluşturma

Yöntem dekoratörleri sınıf yöntemlerine uygulanır. Yöntemin davranışını değiştirmek veya gözlemlemek için kullanılabilirler. Aşağıda yöntem yürütmesini kaydeden bir yöntem dekoratörünün örneği verilmiştir.

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]

Bir Emlak Dekoratörü Oluşturma

Özellik dekoratörleri, özellikleri gözlemlemek veya değiştirmek için kullanılabilir. İşte bir özellik dekoratörünün bir özelliğin varsayılan bir değere sahip olmasını sağladığı bir örnek.

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

Bir Parametre Dekoratörü Oluşturma

Parametre dekoratörleri bir yöntemin parametrelerine uygulanır. Doğrulama veya argümanları günlüğe kaydetme gibi görevler için yararlı olabilirler. İşte bir parametre dekoratörü örneği.

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

Çözüm

TypeScript'teki dekoratörler, sınıfların, yöntemlerin ve özelliklerin işlevselliğini geliştirebilen ve genişletebilen güçlü meta programlama yetenekleri sunar. Özel dekoratörler kullanarak yeniden kullanılabilir, verimli ve düzenli kod yapıları oluşturmak mümkündür. Bu kılavuz, farklı dekoratör türlerinin oluşturulmasını göstermiştir: sınıf, yöntem, özellik ve parametre.