TypeScript सभी मोर्चों पर: वेब, मोबाइल और डेस्कटॉप के लिए कोड कैसे लिखें

TypeScript — आधुनिक डेवलपमेंट का सर्वगुण संपन्न सैनिक

क्या आपने कभी एक कोड बेस लिखकर उसे वेबसाइट, मोबाइल ऐप और डेस्कटॉप पर चलाने का सपना देखा है? दस साल पहले यह कल्पना जैसा लगता था। आज TypeScript हमें बिना किसी जादू या त्याग के यह संभावना देता है।

TypeScript सिर्फ "JavaScript टाइप्स के साथ" नहीं है। यह एक शक्तिशाली उपकरण है जो डायनामिक टाइपिंग की अराजकता को एक सुव्यवस्थित आर्किटेक्चर में बदल देता है। और सबसे महत्वपूर्ण बात यह है कि यह किसी भी प्लेटफ़ॉर्म पर समान रूप से अच्छी तरह से काम करता है। वेब, मोबाइल डिवाइस (iOS, Android) और डेस्कटॉप सिस्टम (Windows, macOS, Linux) — हर जगह अपना TypeScript फ्रेमवर्क है।

इस लेख में, हम वास्तविक रणनीतियों और कोड उदाहरणों पर चर्चा करेंगे जो आपको एक सच्चा क्रॉस-प्लेटफ़ॉर्म TypeScript डेवलपर बनने में मदद करेंगे। आप सीखेंगे कि लॉजिक के दोहराव से कैसे बचें, कौन सी लाइब्रेरी चुनें और प्रदर्शन कैसे न खोएं।

TypeScript क्रॉस-प्लेटफ़ॉर्म डेवलपमेंट के लिए मानक क्यों बन गया

पहले, प्रत्येक प्लेटफ़ॉर्म के लिए एक नई भाषा सीखनी पड़ती थी: iOS के लिए Swift, Android के लिए Java/Kotlin, Windows के लिए C#, बैकएंड के लिए Python। TypeScript इस स्टीरियोटाइप को तोड़ता है। यह हर जगह काम करता है जहाँ JavaScript रनटाइम (ब्राउज़र, Node.js, Deno) या नेटिव रैपर (React Native, Electron) है।

क्रॉस-प्लेटफ़ॉर्म डेवलपमेंट में TypeScript के मुख्य लाभ:

\n
• एकीकृत कोड बेस — बिज़नेस लॉजिक एक बार लिखें, सभी प्लेटफ़ॉर्म पर उपयोग करें।
\n
• सख्त टाइपिंग — रनटाइम के बजाय कंपाइलेशन के दौरान बग पकड़ें।
\n
• समृद्ध इकोसिस्टम — तैयार टाइप्स (DefinitelyTyped) के साथ हजारों लाइब्रेरी।
\n
• आधुनिक सिंटैक्स — async/await, जेनेरिक्स, डेकोरेटर, यूटिलिटी टाइप्स।
\n

वैसे, यदि आप पहले से Python के साथ काम करते हैं और TypeScript आज़माना चाहते हैं, तो आपको एक सुखद आश्चर्य होगा: कई अवधारणाएँ (स्टैटिक टाइपिंग, इंटरफ़ेस, जेनेरिक्स) बहुत समान हैं। pythonlib.ru पर हम यह दिखाना पसंद करते हैं कि विभिन्न भाषाएँ एक ही कार्य को कैसे हल करती हैं। इस अर्थ में TypeScript वेब और नेटिव के बीच एक आदर्श पुल है।

TypeScript पर क्रॉस-प्लेटफ़ॉर्म प्रोजेक्ट की आर्किटेक्चर

कोड को हर जगह काम करने के लिए, एप्लिकेशन को तीन परतों में विभाजित करना होगा:

\n
• कोर (Core) — शुद्ध बिज़नेस लॉजिक, जो प्लेटफ़ॉर्म पर निर्भर नहीं करता।
\n
• एडेप्टर (Adapters) — UI, फ़ाइल सिस्टम, नेटवर्क के लिए पतली परतें।
\n
• प्लेटफ़ॉर्म रैपर — वेब के लिए React, मोबाइल के लिए React Native, डेस्कटॉप के लिए Electron।
\n

एक उदाहरण देखें: टैग के साथ नोट्स लेने वाला एप्लिकेशन। कोर में केवल डेटा के साथ काम करने के लिए टाइप्स और फ़ंक्शन होंगे।

// core/types.ts\nexport interface Note {\n  id: string;\n  title: string;\n  content: string;\n  tags: string[];\n  createdAt: Date;\n}\n\n// core/noteService.ts\nexport function filterNotesByTag(notes: Note[], tag: string): Note[] {\n  return notes.filter(note => note.tags.includes(tag));\n}\n\nexport function createNote(title: string, content: string, tags: string[]): Note {\n  return {\n    id: crypto.randomUUID(),\n    title,\n    content,\n    tags,\n    createdAt: new Date(),\n  };\n}\n

इस कोड का उपयोग किसी भी वातावरण में किया जा सकता है। DOM, React या Node.js पर कोई निर्भरता नहीं। शुद्ध TypeScript लॉजिक।

क्रॉस-प्लेटफ़ॉर्म UI: React + React Native + Electron

TypeScript पर क्रॉस-प्लेटफ़ॉर्म डेवलपमेंट के लिए सबसे लोकप्रिय स्टैक React (वेब), React Native (मोबाइल) और Electron (डेस्कटॉप) है। तीनों एक ही कंपोनेंट सिंटैक्स का उपयोग करते हैं, लेकिन अलग-अलग रेंडरर के साथ।

चरण 1. सामान्य कंपोनेंट बनाएँ

डिस्प्ले लॉजिक को एब्सट्रैक्ट कंपोनेंट में निकाला जा सकता है जो प्लेटफ़ॉर्म प्रिमिटिव का उपयोग करेंगे।

// shared/NoteCard.tsx\nimport { View, Text,