TypeScript ile OOP Tasarım Desenleri: Pratik Rehber

Rehberimizle tasarım desenleri konusunda ustalaşın. Oluşturucu, yapısal ve davranışsal desenleri TypeScript kod örnekleriyle öğrenin; bakım, test ve genişletilebilirlik becerilerinizi hızla yükseltin.

Giriş

Nesne yönelimli programlamada tasarım desenleri, tekrarlayan tasarım zorluklarını çözmek için kanıtlanmış, yeniden kullanılabilir yaklaşımlardır. Bu yaklaşımlar kopyala-yapıştır koddan farklıdır; sınıfları ve nesneleri yapılandırmanıza yardımcı olan uyarlanabilir çözümler sunar. Doğru desenler kodunuzu daha okunabilir, test edilebilir ve genişletilebilir hâle getirir.

TypeScript, modern JavaScript kod tabanlarında yaygın olarak tercih ediliyor; 2022 State of JS anketlerinde TypeScript kullanımının hızla arttığı raporlandı⁵. OOP ilkeleri—polimorfizm, soyutlama ve kalıtım—tasarım desenlerini etkili uygulamak için temel gereksinimlerdir. Pratik bir tazeleme için rehberimize göz atın: Polymorphism vs Inheritance.

Tasarım Desenleri Nedir ve Neden Önemlidir

Plan olmadan karmaşık bir sistemi inşa etmek zordur. Tasarım desenleri, tekrar eden mimari sorunlar için test edilmiş çözümler sunar ve geliştiriciler arasında ortak bir dil oluşturur. “Factory” veya “Singleton” dediğinizde deneyimli ekipler üst düzey niyeti hemen anlar; bu da işbirliğini ve mimari karar almayı hızlandırır.

Bazı desenlerin kökenleri ve erken akademik çalışmaları alanın sağlam bir temele dayandığını gösterir¹. Gang of Four kitabı hâlâ temel başvuru eseridir ve desenlerin sınıflandırılmasında referans kabul edilir².

Tasarım Deseni Kategorileri

Gang of Four desenleri üç ana gruba ayrılır: oluşturucu, yapısal ve davranışsal. Hangi kategoriye bakacağınızı bilmek, doğru çözümü daha hızlı seçmenize yardımcı olur.

Kısa Özet

Oluşturucu Desenler: Nesne Oluşturmayı Kontrol Etme

Oluşturucu desenler, nesne oluşturma mantığını saklayarak istemci kodun somut sınıflara sıkı şekilde bağlı olmasını engeller.

Singleton — Tek Bir Örnek Sağlama

Singleton, bir sınıfın yalnızca bir örneğe sahip olmasını ve küresel bir erişim noktası sağlamasını garanti eder. Veritabanı bağlantısı veya logger gibi paylaşılan kaynaklar için kullanışlıdır; ancak küresel durum test etmeyi ve bağımlılık yönetimini zorlaştırabilir³.

Örnek: veritabanı bağlantısı için TypeScript Singleton.

class DatabaseConnection {
  private static instance: DatabaseConnection;

  private constructor() {
    // A private constructor prevents external new calls
    console.log("Connecting to the database...");
  }

  public static getInstance(): DatabaseConnection {
    if (!DatabaseConnection.instance) {
      DatabaseConnection.instance = new DatabaseConnection();
    }
    return DatabaseConnection.instance;
  }

  public query(sql: string): void {
    console.log(`Executing query: ${sql}`);
  }
}

// Usage
const db1 = DatabaseConnection.getInstance();
const db2 = DatabaseConnection.getInstance();

db1.query("SELECT * FROM users");
console.log(db1 === db2); // true

Not: Gerçekten küresel kaynaklar için Singleton kullanın; daha iyi test edilebilirlik ve bağımlılık yönetimi için bağımlılık enjeksiyonunu tercih edin³.

Factory Method — Alt Sınıfların Ürünü Belirlemesine İzin Verme

Factory Method, nesne oluşturmak için bir arayüz tanımlar; alt sınıflar hangi somut ürünün örnekleneceğine karar verir. Bu yaklaşım istemci kodunu somut sınıflardan ayırarak sistemi genişletmeyi kolaylaştırır.

Örnek: işletim sistemine özgü düğmeleri render etme.

interface Button {
  render(): void;
  onClick(f: () => void): void;
}

class WindowsButton implements Button {
  render() { console.log("Rendering a button in Windows style."); }
  onClick(f: () => void) { console.log("Windows button click event."); f(); }
}

class MacButton implements Button {
  render() { console.log("Rendering a button in macOS style."); }
  onClick(f: () => void) { console.log("Mac button click event."); f(); }
}

abstract class Dialog {
  abstract createButton(): Button;

  render() {
    const okButton = this.createButton();
    okButton.render();
  }
}

class WindowsDialog extends Dialog {
  createButton(): Button { return new WindowsButton(); }
}

class MacDialog extends Dialog {
  createButton(): Button { return new MacButton(); }
}

// Client
const os: string = "windows";
let dialog: Dialog;
if (os === "windows") dialog = new WindowsDialog(); else dialog = new MacDialog();
dialog.render();

Factory Method, oluşturucuyu somut ürünlerden habersiz tutar; yeni platformlar kolayca eklenebilir.

Yapısal Desenler: Bileşenleri Esnek Sistemlerde Birleştirme

Yapısal desenler nesneleri daha büyük, sağlam yapılar içinde bir araya getirmenize yardımcı olur. Aşağıda Adapter ve Decorator örnekleri var.

Adapter — Uyumsuz Arayüzleri Köprüleme

Adapter, uyumsuz bir arayüzü sisteminizin beklediği forma sarar. Bu, eski kodu değiştirmeden yeni kütüphaneleri entegre etmenizi sağlar.

Örnek: ModernLogger'ı mevcut ILogger arayüzüne adapte etmek.

class ModernLogger {
  public logInfo(message: string): void {
    console.log(`[INFO]: ${message}`);
  }
}

interface ILogger { log(message: string): void; }

class LoggerAdapter implements ILogger {
  private modernLogger: ModernLogger;
  constructor() { this.modernLogger = new ModernLogger(); }
  public log(message: string): void { this.modernLogger.logInfo(message); }
}

const logger: ILogger = new LoggerAdapter();
logger.log("User logged in successfully.");

Decorator — İşlevsellik Ekleme çalışma zamanında

Decorator, nesnelere çalışma zamanında sorumluluklar ekleyerek davranışı sarmalar. Alt sınıflamadan daha esnek bir yöntemdir ve tek sorumluluk ilkesiyle uyumludur.

Örnek: isteğe bağlı eklentileri olan bir abonelik bileşimi.

interface Subscription { getDescription(): string; getCost(): number; }

class BasicSubscription implements Subscription {
  getDescription(): string { return "Basic Plan"; }
  getCost(): number { return 10; }
}

abstract class SubscriptionDecorator implements Subscription {
  protected subscription: Subscription;
  constructor(subscription: Subscription) { this.subscription = subscription; }
  abstract getDescription(): string;
  abstract getCost(): number;
}

class PremiumSupportDecorator extends SubscriptionDecorator {
  getDescription(): string { return `${this.subscription.getDescription()}, Premium Support`; }
  getCost(): number { return this.subscription.getCost() + 5; }
}

class CloudStorageDecorator extends SubscriptionDecorator {
  getDescription(): string { return `${this.subscription.getDescription()}, 1TB Cloud Storage`; }
  getCost(): number { return this.subscription.getCost() + 7; }
}

let mySubscription: Subscription = new BasicSubscription();
mySubscription = new PremiumSupportDecorator(mySubscription);
mySubscription = new CloudStorageDecorator(mySubscription);
console.log(mySubscription.getDescription());
console.log(mySubscription.getCost());

Bu bileşimsel yaklaşım özellikleri modüler ve test edilmesi kolay tutar.

Davranışsal Desenler: Nesne Etkileşimlerini Düzenleme

Davranışsal desenler, nesneler arasındaki iletişimi ve sorumluluk paylaşımını düzenler ve sistemin sürdürülebilir kalmasına yardımcı olur.

Observer — İlgilenen Tarafları Bilgilendirme

Observer, bir Subject değiştiğinde birçok gözlemcinin otomatik olarak bilgilendirilmesini sağlar. Olay tabanlı sistemler için idealdir.

Örnek: basit bir bildirim servisi.

interface Subject { attach(observer: Observer): void; detach(observer: Observer): void; notify(): void; }
interface Observer { update(subject: Subject): void; }

class NotificationService implements Subject {
  public state: string = '';
  private observers: Observer[] = [];
  attach(observer: Observer): void { this.observers.push(observer); }
  detach(observer: Observer): void { const i = this.observers.indexOf(observer); if (i !== -1) this.observers.splice(i, 1); }
  notify(): void { for (const o of this.observers) o.update(this); }
  public createNewPost(title: string): void { this.state = `New Post: ${title}`; console.log(`\nNotificationService: A new post was created.`); this.notify(); }
}

class EmailNotifier implements Observer { public update(subject: Subject): void { if (subject instanceof NotificationService) console.log(`EmailNotifier: Sending email about "${subject.state}"`); } }
class PushNotifier implements Observer { public update(subject: Subject): void { if (subject instanceof NotificationService) console.log(`PushNotifier: Sending push notification for "${subject.state}"`); } }

const notificationService = new NotificationService();
const emailer = new EmailNotifier();
const pusher = new PushNotifier();
notificationService.attach(emailer);
notificationService.attach(pusher);
notificationService.createNewPost("Understanding Observer Pattern");
notificationService.detach(pusher);
notificationService.createNewPost("Why Strategy is Awesome");

Observer, gevşek bağlı bir tasarım üretir: Subject’in bildirdiği somut Observer’ları bilmesine gerek yoktur.

Strategy — Algoritmaları Kapsülleme

Strategy, çalışma zamanında algoritmaları takas etmenize izin verir ve büyük koşul bloklarından kaçınır. Bu yaklaşım Açık/Kapalı ilkesine uygundur⁴.

Örnek: bir alışveriş sepeti için ödeme stratejileri.

interface PaymentStrategy { pay(amount: number): void; }
class CreditCardStrategy implements PaymentStrategy { pay(amount: number): void { console.log(`Paying $${amount} with Credit Card.`); } }
class PayPalStrategy implements PaymentStrategy { pay(amount: number): void { console.log(`Paying $${amount} via PayPal.`); } }

class ShoppingCart {
  private paymentStrategy: PaymentStrategy;
  constructor(strategy: PaymentStrategy) { this.paymentStrategy = strategy; }
  public setPaymentStrategy(strategy: PaymentStrategy) { this.paymentStrategy = strategy; }
  public checkout(amount: number): void { this.paymentStrategy.pay(amount); }
}

const cart = new ShoppingCart(new CreditCardStrategy());
cart.checkout(150);
cart.setPaymentStrategy(new PayPalStrategy());
cart.checkout(150);

Strategy, koşullu karmaşıklığı azaltır ve sistemi genişletmeyi kolaylaştırır.

Yaygın Tuzaklar ve Refaktoring Stratejileri

Deseni seçmek işin yarısıdır; anti-pattern’lerden kaçınmak ve kod kokularını tespit etmek gerekir. Tek Sorumluluk İlkesini ihlal eden God Object gibi yapılar, uzun metodlar ve aşırı bağımlılıklar refaktoring gerektirir.

Refaktoring, dış davranışı değiştirmeden dahili yapıyı iyileştirmektir. Bu süreç miras sistemleri güvenli şekilde yeniden düzenlemenin temel yoludur. Refaktoring teknikleri ve pratikleri için kaynaklara bakın¹.

Strategy ile Refaktoring

Uzun switch veya if/else blokları bir koku göstergesidir. Bu davranışı Strategy arayüzüne çıkarmak, koşulu tek bir strateji çağrısına dönüştürür. Bu değişiklik test edilebilirliği ve genişletilebilirliği artırır⁴.

Sıkça Sorulan Sorular (Kısa ve Öz)

Q1: Hangi desenleri hemen öğrenmeliyim? A1: Önce Singleton, Factory, Adapter, Decorator, Observer ve Strategy’yi öğrenin; bu desenler çoğu problemin çözümünde yeterlidir.

Q2: Deseni ne zaman kullanmamalıyım? A2: Gerçek bir gereksinim yoksa desen kullanmak karmaşıklık yaratır. YAGNI prensibini uygulayın.

Q3: Tasarım desenleri fonksiyonel yaklaşımla uyumlu mu? A3: Evet. Strategy fonksiyon parametresiyle, Decorator yüksek mertebeden fonksiyonlarla uygulanabilir.

Clean Code Guy olarak ekiplerin sürdürülebilir yazılım inşa etmesine yardımcı oluyoruz. Kod denetimlerimiz ve AI-uyumlu refaktoring ile ekibinizin güvenle üretime geçmesini nasıl sağlayabileceğimizi keşfedin: https://cleancodeguy.com.