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

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

TypeScript पर जटिल एप्लिकेशन विकसित करने के लिए न केवल सिंटैक्स का ज्ञान आवश्यक है, बल्कि एक लचीली, स्केलेबल आर्किटेक्चर बनाने की क्षमता भी आवश्यक है। GoF (Gang of Four) डिज़ाइन पैटर्न स्वर्ण मानक बने हुए हैं, लेकिन उन्नत स्तर पर उनका अनुप्रयोग अधिक सूक्ष्म हो जाता है। इस लेख में, हम चार शक्तिशाली पैटर्न — Bridge, Visitor, State और Strategy — को TypeScript पर वास्तविक उदाहरणों के साथ समझेंगे। आप सीखेंगे कि इन पैटर्न को लागू करने के लिए सख्त टाइपिंग, जेनेरिक और इंटरफ़ेस का उपयोग कैसे करें।

1. Bridge: एब्स्ट्रक्शन को इम्प्लीमेंटेशन से अलग करना

Bridge (ब्रिज) पैटर्न एब्स्ट्रक्शन और उसके इम्प्लीमेंटेशन को अलग करता है, जिससे उन्हें स्वतंत्र रूप से बदला जा सकता है। यह विशेष रूप से तब उपयोगी होता है जब आपके पास कार्यक्षमता के कई रूप हों जिन्हें जोड़ा जा सके।

उदाहरण: विभिन्न ग्राफिकल API (Canvas और SVG) में आकृतियों को रेंडर करने की प्रणाली।

// इम्प्लीमेंटेशन (Implementation)\ninterface Renderer {\n    renderCircle(radius: number): void;\n    renderSquare(side: number): void;\n}\n\nclass CanvasRenderer implements Renderer {\n    renderCircle(radius: number): void {\n        console.log(`Canvas: त्रिज्या ${radius} वाला वृत्त बनाते हैं`);\n    }\n    renderSquare(side: number): void {\n        console.log(`Canvas: भुजा ${side} वाला वर्ग बनाते हैं`);\n    }\n}\n\nclass SVGRenderer implements Renderer {\n    renderCircle(radius: number): void {\n        console.log(`SVG: <circle r="${radius}" />`);\n    }\n    renderSquare(side: number): void {\n        console.log(`SVG: <rect width="${side}" height="${side}" />`);\n    }\n}\n\n// एब्स्ट्रक्शन (Abstraction)\nabstract class Shape {\n    protected renderer: Renderer;\n\n    constructor(renderer: Renderer) {\n        this.renderer = renderer;\n    }\n\n    abstract draw(): void;\n}\n\nclass Circle extends Shape {\n    private radius: number;\n\n    constructor(renderer: Renderer, radius: number) {\n        super(renderer);\n        this.radius = radius;\n    }\n\n    draw(): void {\n        this.renderer.renderCircle(this.radius);\n    }\n}\n\nclass Square extends Shape {\n    private side: number;\n\n    constructor(renderer: Renderer, side: number) {\n        super(renderer);\n        this.side = side;\n    }\n\n    draw(): void {\n        this.renderer.renderSquare(this.side);\n    }\n}\n\n// उपयोग\nconst canvasCircle = new Circle(new CanvasRenderer(), 10);\ncanvasCircle.draw(); // Canvas: त्रिज्या 10 वाला वृत्त बनाते हैं\n\nconst svgSquare = new Square(new SVGRenderer(), 5);\nsvgSquare.draw(); // SVG: <rect width="5" height="5" />

मुख्य विशेषता: TypeScript गारंटी देता है कि सभी इम्प्लीमेंटेशन Renderer अनुबंध का पालन करते हैं। नए प्रकार की आकृति या नया रेंडरर जोड़ने से मौजूदा कोड नहीं टूटता।

2. Visitor: क्लासेस को बदले बिना जटिल संरचनाओं का भ्रमण

Visitor (आगंतुक) पैटर्न वस्तुओं के क्लासेस को बदले बिना उनमें नए ऑपरेशन जोड़ने की अनुमति देता है। यह ट्री, AST (एब्स्ट्रैक्ट सिंटैक्स ट्री) या कंपोनेंट पदानुक्रम के साथ काम करने के लिए एक आदर्श समाधान है।

उदाहरण: दस्तावेज़ नोड्स को विभिन्न प्रारूपों (JSON, XML) में निर्यात करने की प्रणाली।

// एलिमेंट्स (Elements)\ninterface DocumentNode {\n    accept(visitor: Visitor): void;\n}\n\nclass TextNode implements DocumentNode {\n    constructor(public content: string) {}\n\n    accept(visitor: Visitor): void {\n        visitor.visitTextNode(this);\n    }\n}\n\nclass ImageNode implements DocumentNode {\n    constructor(public src: string, public alt: string) {}\n\n    accept(visitor: Visitor): void {\n        visitor.visitImageNode(this);\n    }\n}\n\n// विज़िटर (Visitor)\ninterface Visitor {\n    visitTextNode(node: TextNode): void;\n    visitImageNode(node: ImageNode): void;\n}\n\nclass JSONExporter implements Visitor {\n    private p