TypeScript में डिज़ाइन पैटर्न: उदाहरणों के साथ उन्नत स्तर

TypeScript में डिज़ाइन पैटर्न: उदाहरणों के साथ उन्नत स्तर

जब बुनियादी पैटर्न (सिंगलटन, फ़ैक्टरी मेथड, ऑब्ज़र्वर) में महारत हासिल हो जाती है, तो अधिक जटिल आर्किटेक्चरल समाधानों का समय आता है। TypeScript अपनी शक्तिशाली टाइप सिस्टम, जेनेरिक और डेकोरेटर के साथ उन्नत GoF पैटर्न को लागू करने के लिए नई संभावनाएं खोलता है। इस लेख में, हम चार प्रमुख पैटर्न पर चर्चा करेंगे: एब्सट्रैक्ट फ़ैक्टरी, बिल्डर, चेन ऑफ़ रिस्पॉन्सिबिलिटी और स्ट्रैटेजी — TypeScript-विशिष्ट विशेषताओं पर ध्यान केंद्रित करते हुए।

1. टाइप किए गए परिवारों के साथ एब्सट्रैक्ट फ़ैक्टरी

«एब्सट्रैक्ट फ़ैक्टरी» पैटर्न विशिष्ट वर्गों से बंधे बिना परस्पर संबंधित वस्तुओं के परिवार बनाने की अनुमति देता है। TypeScript में, हम उत्पादों की सख्त टाइपिंग के लिए इंटरफ़ेस और जेनेरिक का उपयोग कर सकते हैं।

उदाहरण: विभिन्न ऑपरेटिंग सिस्टम के लिए UI घटक बनाना।

// एब्सट्रैक्ट उत्पादinterface Button {  render(): void;  click(): void;}

interface Checkbox {  render(): void;  toggle(): void;}

// Windows के लिए विशिष्ट उत्पादclass WinButton implements Button {  render() { console.log('विंडोज बटन रेंडर करना'); }  click() { console.log('विंडोज बटन पर क्लिक'); }}

class WinCheckbox implements Checkbox {  render() { console.log('विंडोज चेकबॉक्स रेंडर करना'); }  toggle() { console.log('विंडोज चेकबॉक्स टॉगल करना'); }}

// macOS के लिए विशिष्ट उत्पादclass MacButton implements Button {  render() { console.log('macOS बटन रेंडर करना'); }  click() { console.log('macOS बटन पर क्लिक'); }}

class MacCheckbox implements Checkbox {  render() { console.log('macOS चेकबॉक्स रेंडर करना'); }  toggle() { console.log('macOS चेकबॉक्स टॉगल करना'); }}

// एब्सट्रैक्ट फ़ैक्टरीinterface GUIFactory {  createButton(): Button;  createCheckbox(): Checkbox;}

// विशिष्ट फ़ैक्टरियाँclass WinFactory implements GUIFactory {  createButton(): Button { return new WinButton(); }  createCheckbox(): Checkbox { return new WinCheckbox(); }}

class MacFactory implements GUIFactory {  createButton(): Button { return new MacButton(); }  createCheckbox(): Checkbox { return new MacCheckbox(); }}

// उपयोगfunction createUI(factory: GUIFactory) {  const button = factory.createButton();  const checkbox = factory.createCheckbox();  button.render();  checkbox.render();}

createUI(new WinFactory());// विंडोज बटन रेंडर करना// विंडोज चेकबॉक्स रेंडर करना

उन्नत तकनीक: यदि फ़ैक्टरी को विभिन्न प्रकार के उत्पादों के साथ काम करना है, तो जेनेरिक का उपयोग करें:

abstract class AbstractFactory<TProduct> {  abstract createProduct(): TProduct;}

class ConcreteFactory extends AbstractFactory<Button> {  createProduct(): Button {    return new WinButton();  }}

2. फ्लुएंट इंटरफ़ेस और अपरिवर्तनीयता के साथ बिल्डर

«बिल्डर» पैटर्न तब उपयोगी होता है जब किसी वस्तु में कई वैकल्पिक पैरामीटर हों। TypeScript मेथड चेन के साथ एक टाइप-सेफ बिल्डर बनाने की अनुमति देता है।

उदाहरण: HTTP अनुरोध का कॉन्फ़िगरेशन।

class HttpRequest {  private constructor(    public readonly url: string,    public readonly method: 'GET' | 'POST' | 'PUT',    public readonly headers: Record<string, string>,    public readonly body?: string  ) {}

  static builder(): HttpRequestBuilder {    return new HttpRequestBuilder();  }}

class HttpRequestBuilder {  private url: string = '';  private method: 'GET' | 'POST' | 'PUT' = 'GET';  private headers: Record<string, string> = {};  private body?: string;

  setUrl(url: string): this {    this.url = url;    return this;  }

  setMethod(method: 'GET' | 'POST' | 'PUT'): this {    this.method = method;    return this;  }

  addH