Özet - Decorator'lar
- TypeScript kursu
- Orta seviye
- Ders 48/89
- 4 dk
Decorator'larla bir loglama katmanı yazarsın.
Özet - Decorator'lar
Decorator'lar, sınıfları, metotları ve özellikleri işaretleyip değiştiren fonksiyonlardır. Sınıf decorator'u constructor alır; metot decorator'u (target, key, descriptor) alır; property decorator'u (target, key) alır. Fabrikalar, parametreli decorator'lar döndürür. Birleşerek loglama, doğrulama ve metadata katmanları oluştururlar.
function LogCagri(etiket: string) {
return function(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket + " çağrıldı");
return original.apply(this, args);
};
};
}Uygulama Loglama katmanı yaz
LogCagri fabrikası yaz: (etiket: string) alsın ve (target: any, key: string, descriptor: PropertyDescriptor): void imzalı bir decorator döndürsün. Decorator gövdesinde original = descriptor.value kaydet; descriptor.value'yı, console.log(etiket + " çağrıldı") yazdırıp original.apply(this, args) döndüren fonksiyonla değiştir. Hesap sınıfı yaz; topla(a: number, b: number): number metodu a + b döndürsün. Object.getOwnPropertyDescriptor ile topla'nın descriptor'unu al, fabrikayı "HESAP" etiketiyle çağırıp dönen decorator'u iki adımlı uygula, Object.defineProperty ile geri yaz. Hesap örneği üzerinde toplama metoduyla 4 ve 5 değerlerini topla ve sonucu yazdır.
Başlangıç kodu
// LogCagri fabrikasını yaz: etiket: string alır
// (target, key, descriptor) imzalı decorator döndürsün
// original = descriptor.value kaydet
// descriptor.value'yu loglayan ve original.apply döndüren fonksiyonla değiştir
// Hesap sınıfı, topla(a, b) metodu a+b döndürsün
// topla'nın descriptor'unu Object.getOwnPropertyDescriptor ile al
// Fabrikayı "HESAP" etiketiyle çağır, dönen decorator'u iki adımlı uygula
// Object.defineProperty ile geri yaz
// Hesap örneği üzerinde 4 ve 5'i topla, sonucu yazdırÖrnek çözüm
function LogCagri(etiket: string): (target: any, key: string, descriptor: PropertyDescriptor) => void {
return function(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket + " çağrıldı");
return original.apply(this, args);
};
};
}
class Hesap {
topla(a: number, b: number): number {
return a + b;
}
}
const desc = Object.getOwnPropertyDescriptor(Hesap.prototype, "topla")!;
LogCagri("HESAP")(Hesap.prototype, "topla", desc);
Object.defineProperty(Hesap.prototype, "topla", desc);
console.log(new Hesap().topla(4, 5));Beklenen çıktı
HESAP çağrıldı 9
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir metodun davranışını değiştirmek için hangi decorator türü kullanılır?
- Metot decorator'u Doğru cevap
- Sınıf decorator'u
- Property decorator'u
- Sadece fabrika
Açıklama: Metot davranışını değiştirmek için metot decorator'u kullanılır; descriptor.value değiştirilerek metodun kendisi sarılır. Sınıf decorator'u sınıfı, property decorator'u özellik adını işler.
2 Fabrikadan decorator döndür
function LogCagri(etiket: string) {
return ____(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket);
return original.apply(this, args);
};
};
}function LogCagri(etiket: string) {
return function(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket);
return original.apply(this, args);
};
};
}Açıklama: Fabrika bir decorator fonksiyonu döndürmelidir; bu yüzden return function yazılır. class sınıf bildirimi ister; new bir ifade operatörüdür; void bir değer döndürmez.
3 Decorator türlerini eşleştir
| Kavram | Anlamı |
|---|---|
Sınıf decorator'u |
Constructor fonksiyonu alır |
Metot decorator'u |
target, key, descriptor alır |
Property decorator'u |
target, key alır |
Decorator fabrikası |
Decorator döndüren fonksiyon |