TypeScript Dekoratörlerini Anlama

TypeScript dekoratörleri, çalışma zamanında sınıflara, yöntemlere, özelliklere ve parametrelere işlevsellik eklemenin güçlü bir yolunu sağlar. Genellikle Angular gibi çerçevelerde bağımlılık enjeksiyonu, günlük kaydı, doğrulama ve daha fazlası için kullanılırlar. Bu makale, TypeScript'teki farklı dekoratör türlerini ve bunların etkili bir şekilde nasıl kullanılacağını açıklayacaktır.

TypeScript Dekoratörleri Nelerdir?

TypeScript'teki dekoratörler, @ sembolüyle öneklenen ve sınıflar, yöntemler veya özellikler gibi çeşitli öğelere eklenebilen işlevlerdir. Kodu doğrudan değiştirmeden, eklendikleri kodun davranışını değiştirmenize olanak tanırlar.

Dekoratör Çeşitleri

• Sınıf Dekoratörleri: Tüm sınıfa uygulanır.
• Metot Dekoratörleri: Bir sınıf içindeki bir metoda uygulanır.
• Özellik Dekoratörleri: Bir sınıftaki özelliğe uygulanır.
• Parametre Dekoratörleri: Bir sınıftaki metodun parametrelerine uygulanır.

TypeScript'te Dekoratörler Nasıl Etkinleştirilir

Dekoratörleri kullanmadan önce, tsconfig.json dosyanızda "experimentalDecorators" öğesini true olarak ayarlayarak bunları etkinleştirdiğinizden emin olun.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Sınıf Dekoratörleri

Bir sınıf dekoratörü tüm bir sınıfa uygulanır. Bir sınıfın meta verilerini eklemek veya davranışını değiştirmek için kullanışlıdır.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Yöntem Dekoratörleri

Yöntem dekoratörleri bir sınıf içindeki yöntemlere uygulanır. Bu dekoratörler bir yöntemin davranışını değiştirmek veya günlüğe kaydetmek için kullanılabilir.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Emlak Dekoratörleri

Özellik dekoratörleri, bir sınıftaki özelliklere işlevsellik eklemek için kullanılır. Doğrulama veya bir özelliğe meta veri eklemek için yararlı olabilirler.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Parametre Dekoratörleri

Parametre dekoratörleri, metot parametreleri hakkındaki bilgileri değiştirmek veya günlüğe kaydetmek için kullanılır.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Çözüm

TypeScript'teki dekoratörler, kodunuzun yapısını değiştirmeden işlevselliğini artırmanın güçlü bir yolunu sunar. Sınıf, yöntem, özellik ve parametre dekoratörlerinin nasıl kullanılacağını anlayarak, günlük kaydı, doğrulama ve bağımlılık enjeksiyonu gibi gelişmiş özellikleri uygulayabilirsiniz. Dekoratörler, özellikle büyük uygulamalarda geliştirme iş akışınızı büyük ölçüde iyileştirebilecek TypeScript'teki önemli bir özelliktir.