TypeScript में आर्किटेक्चरल पैटर्न: अराजकता से स्वच्छ कोड तक

TypeScript में आर्किटेक्चरल पैटर्न: "स्पेगेटी" कोड लिखना कैसे बंद करें और जीना कैसे शुरू करें

क्या आपने कभी TypeScript में लिखा कोई प्रोजेक्ट खोला है, जो छह महीने पहले लिखा गया था, और डर के साथ महसूस किया कि आप अपनी खुद की क्लासेस को समझ नहीं पा रहे हैं? या हो सकता है, आप एक नई सुविधा जोड़ रहे थे, और एप्लिकेशन तीन अप्रत्याशित जगहों पर क्रैश हो गया? परिचित लगता है? डेवलपर्स के क्लब में आपका स्वागत है, जिन्होंने एक बार सोचा था कि "यह चल जाएगा" — और इसकी कीमत चुकाई।

TypeScript केवल JavaScript पर टाइप्स के साथ एक ओवरले नहीं है। यह एक शक्तिशाली उपकरण है जो जटिल, स्केलेबल और रखरखाव योग्य सिस्टम बनाने की अनुमति देता है। लेकिन टाइप्स अकेले आपको आर्किटेक्चरल अराजकता से नहीं बचाएंगे। आपको आर्किटेक्चरल पैटर्न की आवश्यकता है — समय-परीक्षित रेसिपी जो कोड को व्यवस्थित करने में मदद करते हैं ताकि वह समझने योग्य, परीक्षण योग्य और लचीला हो।

इस लेख में, हम पाँच प्रमुख TypeScript आर्किटेक्चरल पैटर्न पर चर्चा करेंगे, जो वास्तविक प्रोजेक्ट्स में सबसे अधिक उपयोग किए जाते हैं। आप कोड उदाहरण देखेंगे, समझेंगे कि प्रत्येक पैटर्न को कहाँ और क्यों लागू करना है, और उन्हें तुरंत अपने काम में शामिल कर पाएंगे। चलिए शुरू करते हैं!

1. MVC (Model-View-Controller) — शैली की क्लासिक

सबसे प्रसिद्ध पैटर्न से शुरू करते हैं। TypeScript में MVC एप्लिकेशन को तीन परतों में विभाजित करना है:

\n
• Model — डेटा और बिज़नेस लॉजिक।
\n
• View — प्रदर्शन (UI)।
\n
• Controller — कनेक्टिंग लिंक, उपयोगकर्ता इनपुट को संसाधित करता है।
\n

TypeScript अनुप्रयोगों में MVC विशेष रूप से अच्छा है क्योंकि हम सभी परतों को सख्ती से टाइप कर सकते हैं, कंपाइलेशन चरण में त्रुटियों को समाप्त करते हुए।

उदाहरण: एक सरल कार्य सूची (Todo List)

// Model\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nclass TaskModel {\n  private tasks: Task[] = [];\n\n  addTask(title: string): Task {\n    const newTask: Task = {\n      id: Date.now(),\n      title,\n      completed: false,\n    };\n    this.tasks.push(newTask);\n    return newTask;\n  }\n\n  getTasks(): Task[] {\n    return this.tasks;\n  }\n}\n\n// View\nclass TaskView {\n  render(tasks: Task[]): void {\n    console.clear();\n    tasks.forEach(task => {\n      console.log(`${task.id}: [${task.completed ? 'x' : ' '}] ${task.title}`);\n    });\n  }\n}\n\n// Controller\nclass TaskController {\n  constructor(\n    private model: TaskModel,\n    private view: TaskView\n  ) {}\n\n  addTask(title: string): void {\n    this.model.addTask(title);\n    this.view.render(this.model.getTasks());\n  }\n\n  showAll(): void {\n    this.view.render(this.model.getTasks());\n  }\n}\n\n// उपयोग\nconst model = new TaskModel();\nconst view = new TaskView();\nconst controller = new TaskController(model, view);\ncontroller.addTask('TypeScript पैटर्न सीखें');\ncontroller.addTask('लेख लिखें');

यह क्यों अच्छा है? आप Model को छुए बिना View बदल सकते हैं (उदाहरण के लिए, कंसोल से React पर स्विच करना)। आप UI से अलग बिज़नेस लॉजिक का परीक्षण कर सकते हैं। TypeScript एप्लिकेशन की आर्किटेक्चर पारदर्शी हो जाती है।

2. Observer — घटनाओं का राजा

यदि आपका एप्लिकेशन घटनाओं (क्लिक, सर्वर प्रतिक्रियाएँ, टाइमर) पर निर्भर करता है, तो पैटर्न Observer TypeScript आपका सबसे अच्छा दोस्त है। यह एक वस्तु (प्रकाशक) के परिवर्तनों की निगरानी करने के लिए दूसरी वस्तुओं (सब्सक्राइबर्स) की अनुमति देता है।

उदाहरण: सूचना प्रणाली

// प्रेक्षक इंटरफ़ेस\ninterface Observer {\n  update(data: string): void;\n}\n\n// प्रकाशक\nclass NewsPublisher {\n  private observers: Observer[] = [];\n\n  subscribe(observer: Observer): void {\n    this.observers.push(observer);\n  }\n\n  unsubscribe(observer: Observer): void {\n    this.observers = this.observers.filter(obs => obs !== observer);\n  }\n\n  publishNews(news: string): void {\n    this.observers.forEach(obs => obs.update(news));\n  }\n}\n\n// विशिष्ट प्रेक्षक: ईमेल सूचना\nclass Em