Angular'da TypeScript Dekoratörleriyle Nasıl Çalışılır

TypeScript dekoratörleri, bir sınıfa, yönteme, erişim aracına, özelliğe veya parametreye eklenebilen özel bir bildirim türüdür. Angular'da dekoratörler, sınıflara meta veri eklemenin bir yolunu sunarak, yeniden kullanılabilir bileşenler, hizmetler ve daha fazlasını oluşturmak için oldukça güçlü hale getirir. Bu kılavuz, kullanımlarını daha iyi anlamanıza yardımcı olacak örnekler sunarak Angular'da TypeScript dekoratörleriyle nasıl çalışacağınızı açıklar.

TypeScript Dekoratörleri Nelerdir?

Dekoratörler, bir sınıfın veya sınıf üyesinin davranışını değiştiren işlevlerdir. Angular'da dekoratörler, bileşenleri, yönergeleri, boruları ve enjekte edilebilir hizmetleri tanımlamak için kullanılır. Sınıfa meta verileri uygulamak için beyanlı bir yol sağlarlar ve Angular bunu çeşitli amaçlar için kullanır, örneğin bileşenlerin örneklerini oluşturma veya bağımlılıkları enjekte etme.

Yaygın Açısal Dekoratörler

Angular'ın farklı amaçlar için kullanılan birçok yerleşik dekoratörü vardır. Aşağıda en yaygın Angular dekoratörleri verilmiştir:

• @Component - Bir Angular bileşenini tanımlar.
• @Directive - Bir Angular yönergesi tanımlar.
• @Pipe - Angular boruyu tanımlar.
• @Injectable - Diğer bileşenlere veya hizmetlere enjekte edilebilen bir hizmeti tanımlar.
• @Input - Bir özelliği, veri bağlayıcı bir girdi haline getirmek için dekore eder.
• @Output - Bir özelliği olay bağlayıcı bir çıktı haline getirmek için dekore eder.

@Component Dekoratörünü Kullanma

@Component dekoratörü bir Angular bileşenini tanımlamak için kullanılır. Seçici, şablon, stiller ve diğer yapılandırmalar gibi bileşen hakkında meta veriler sağlar.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Bu örnekte, @Component dekoratörü, "Merhaba Dünya!"yı görüntüleyen bir şablona sahip basit bir bileşeni tanımlar. selector, bu bileşen için kullanılacak özel HTML etiketini belirtir.

@Injectable Dekoratörünü Kullanma

@Injectable dekoratörü, diğer bileşenlere veya hizmetlere enjekte edilebilecek bir servis sınıfını tanımlamak için kullanılır. Angular'ın bağımlılık enjeksiyon sisteminin önemli bir parçasıdır.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Burada, @Injectable dekoratörü, DataService öğesini uygulama genelinde bağımlılık enjeksiyonu için kullanılabilir hale getirir.

@Input ve @Output Dekoratörlerini Kullanma

@Input ve @Output dekoratörleri, Angular bileşenlerinde giriş özellikleri ve çıkış olayları oluşturmak için kullanılır. Genellikle bileşen iletişimi için kullanılırlar.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

Bu örnekte, @Input dekoratörü, bir üst bileşenden bir alt bileşene veri geçirmek için kullanılır. @Output dekoratörü, bir olay aracılığıyla alt bileşenden üst bileşene veri göndermek için kullanılır.

Özel Dekoratörler Oluşturma

Angular'da sınıflara, yöntemlere veya özelliklere belirli davranış veya meta veri eklemek için özel dekoratörler oluşturulabilir. Aşağıda basit bir sınıf dekoratörünün bir örneği verilmiştir:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Burada, LogClass fonksiyonu, tanımlandığında sınıfı konsola kaydeden özel bir dekoratördür. @LogClass fonksiyonunu MyService fonksiyonuna uygulamak, oluşturulması sırasında mesajları kaydeder.

Çözüm

Angular'daki dekoratörler, sınıflara, yöntemlere, özelliklere ve parametrelere meta veri ve davranış eklemek için güçlü bir yol sağlar. @Component, @Injectable, @Input ve @Output gibi yerleşik dekoratörlerin nasıl kullanılacağını anlamak, etkili Angular geliştirme için önemlidir. Ek olarak, bir uygulamada belirli ihtiyaçları karşılamak için özel dekoratörler oluşturulabilir ve bu da geliştirme sürecine esneklik katar.