TypeScript'te Dekoratörler Nasıl Kullanılır

TypeScript'teki dekoratörler, geliştiricilerin sınıflara, yöntemlere, özelliklere ve parametrelere ekstra işlevsellik eklemesini sağlayan güçlü bir özelliktir. Mevcut kodun davranışını, gerçek yapısını değiştirmeden değiştirmenin bir yolunu sağlarlar. Bu kılavuz, TypeScript'te dekoratörlerin nasıl kullanılacağını, kolay takip edilebilir örneklerle açıklayacaktır.

Dekoratörler Nelerdir?

Dekoratörler, sınıflara, yöntemlere, özelliklere veya parametrelere uygulanabilen özel işlevlerdir. Çalışma zamanında çağrılır ve geliştiricilerin kodu bildirimsel bir şekilde açıklamalarına ve değiştirmelerine olanak tanır. Bir TypeScript projesinde dekoratörleri etkinleştirmek için, tsconfig.json dosyasında experimentalDecorators bayrağı true olarak ayarlanmalıdır.

TypeScript'te Dekoratörleri Etkinleştirme

Dekoratörleri kullanmak için, TypeScript derleyicisinin bunları tanıyacak şekilde yapılandırılması gerekir. Bu, tsconfig.json dosyasında experimentalDecorators bayrağını true olarak ayarlayarak yapılabilir.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Dekoratörler etkinleştirildikten sonra proje boyunca kullanılabilirler.

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

Bir sınıf dekoratörü bir sınıf bildirimine uygulanır ve bir sınıf tanımını değiştirmek veya değiştirmek için kullanılabilir. Sınıf dekoratörleri, süsledikleri sınıfın hemen üstünde @ sembolü kullanılarak bildirilir.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

Bu örnekte, LogClass dekoratörü, Person sınıfı oluşturulduğunda bir ileti kaydeder. Dekoratör, tek bir argüman alan bir fonksiyon olarak tanımlanır: dekore edilen sınıfın kurucusu.

Yöntem Dekoratörleri

Yöntem dekoratörleri bir sınıf içindeki yöntemlere uygulanır. Geliştiricilerin yöntem çağrılarını kesmesine, davranışlarını değiştirmesine veya yöntem yürütülmeden önce veya sonra ek işlemler gerçekleştirmesine olanak tanır.

function LogMethod(target: Object, 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): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Burada, LogMethod dekoratörü, add yöntemi çağrıldığında yöntem adını ve argümanlarını günlüğe kaydeder. Orijinal yöntemi, orijinal yönteme devretmeden önce günlüğe kaydetmeyi gerçekleştiren yeni bir işleve sarar.

Emlak Dekoratörleri

Özellik dekoratörleri, sınıf özelliklerinin davranışını gözlemlemek veya değiştirmek için kullanılır. Yöntem dekoratörlerinin aksine, özellik değerinin kendisine erişimleri yoktur, ancak özelliklere meta veri ekleyebilirler.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

Bu örnekte, ReadOnly dekoratörü, Book sınıfının title özelliğine uygulanarak, writable özelliği false olarak ayarlanarak salt okunur hale getirilir.

Parametre Dekoratörleri

Parametre dekoratörleri, yöntem parametrelerini açıklamak veya değiştirmek için kullanılır. Üç argüman alırlar: hedef nesne, yöntem adı ve parametre dizini.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

Bu örnekte, LogParameter dekoratörü, UserService sınıfındaki greet yönteminin message parametresine uygulanır. Dekoratör, dekore edilen parametre hakkında bilgi kaydeder.

Çözüm

TypeScript'teki dekoratörler, yapısını değiştirmeden kod işlevselliğini geliştirmek için güçlü bir yol sunar. Sınıf, yöntem, özellik ve parametre dekoratörlerinden yararlanarak geliştiriciler projelerine kolayca yeniden kullanılabilir işlevsellik ekleyebilirler. Bu kılavuzda sağlanan örneklerle TypeScript'te dekoratörleri kullanmaya başlamak kolaydır.