इस अध्याय में, हम TypeScript के प्रैक्टिकल एप्लिकेशन्स के बारे में जानेंगे और यह समझेंगे कि TypeScript का उपयोग करके प्रोजेक्ट्स को कैसे सेटअप और प्रबंधित किया जाता है। हम TypeScript प्रोजेक्ट सेटअप, React और Node.js के साथ TypeScript का उपयोग, और अन्य वास्तविक जीवन के उदाहरणों पर चर्चा करेंगे। इस अध्याय का उद्देश्य आपको TypeScript की सिद्धांतों से प्रैक्टिकल एप्लिकेशन्स तक की यात्रा को पूरा करना है, जिससे आप TypeScript का उपयोग करके प्रभावी और संगठित प्रोजेक्ट्स बना सकें।
प्रोजेक्ट सेटअप (Project Setup)
TypeScript में एक प्रोजेक्ट सेटअप करना एक सरल प्रक्रिया है, लेकिन यह कुछ महत्वपूर्ण चरणों का पालन करता है। इस सेक्शन में, हम TypeScript प्रोजेक्ट सेटअप की पूरी प्रक्रिया को विस्तार से जानेंगे। हम एक नया प्रोजेक्ट बनाएंगे, TypeScript को इंस्टॉल करेंगे, और एक बेसिक TypeScript कॉन्फ़िगरेशन तैयार करेंगे।
1. नया प्रोजेक्ट बनाएँ (Create a New Project)
सबसे पहले, एक नई डायरेक्टरी बनाएँ और उसमें जाएँ:
2. NPM इनिशियलाइज़ करें (Initialize NPM)
अब अपने प्रोजेक्ट को NPM के साथ इनिशियलाइज़ करें:
3. TypeScript को इंस्टॉल करें (Install TypeScript)
TypeScript को प्रोजेक्ट में इंस्टॉल करने के लिए निम्नलिखित कमांड का उपयोग करें:
4. TypeScript कॉन्फ़िगरेशन बनाएँ (Create TypeScript Configuration)
TypeScript प्रोजेक्ट को कॉन्फ़िगर करने के लिए, एक tsconfig.json फ़ाइल बनाएँ। इसे बनाने के लिए निम्नलिखित कमांड का उपयोग करें:
यह कमांड एक tsconfig.json फ़ाइल बनाएगी जिसमें TypeScript के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन सेटिंग्स होंगी।
5. tsconfig.json कॉन्फ़िगर करें (Configure tsconfig.json)
tsconfig.json फ़ाइल को अपनी आवश्यकताओं के अनुसार कॉन्फ़िगर करें। एक साधारण कॉन्फ़िगरेशन इस प्रकार हो सकता है:
6. प्रोजेक्ट स्ट्रक्चर बनाएँ (Create Project Structure)
प्रोजेक्ट डायरेक्टरी में src नामक एक फोल्डर बनाएँ। यह वह फोल्डर होगा जहाँ आप अपने TypeScript कोड को रखेंगे।
7. TypeScript कोड लिखें (Write TypeScript Code)
अब, src फोल्डर में एक TypeScript फ़ाइल बनाएँ और उसमें कोड लिखें। उदाहरण के लिए, index.ts नाम की एक फ़ाइल बनाएं:
8. TypeScript कोड को कंपाइल करें (Compile TypeScript Code)
TypeScript कोड को JavaScript में कंपाइल करने के लिए, निम्नलिखित कमांड का उपयोग करें:
यह आपके TypeScript फाइलों को JavaScript में कंपाइल करेगा और आउटपुट फाइलें dist फोल्डर में बनाएगा।
9. कंपाइल्ड कोड को रन करें (Run Compiled Code)
कंपाइल्ड JavaScript कोड को रन करने के लिए, निम्नलिखित कमांड का उपयोग करें:
आपको आउटपुट के रूप में “Hello, TypeScript!” संदेश दिखाई देगा।
TypeScript के साथ React (React with TypeScript)
TypeScript के साथ React का उपयोग करना एक शक्तिशाली संयोजन है जो आपको टाइप-सुरक्षित और प्रबंधनीय कोड लिखने की अनुमति देता है। इस सेक्शन में, हम देखेंगे कि कैसे एक नया React प्रोजेक्ट सेटअप करें और उसमें TypeScript को जोड़ें। हम React कंपोनेंट्स को TypeScript के साथ लिखने और उपयोग करने के विभिन्न तरीकों को भी जानेंगे।
1. नया React प्रोजेक्ट बनाएँ (Create a New React Project)
सबसे पहले, Create React App का उपयोग करके एक नया React प्रोजेक्ट बनाएं:
यह कमांड एक नया React प्रोजेक्ट बनाएगा और TypeScript को पहले से कॉन्फ़िगर करेगा।
2. React और TypeScript का सेटअप (Setup React and TypeScript)
Create React App पहले से ही आवश्यक TypeScript और React की डिपेंडेंसीज़ को सेटअप कर देता है, जिससे आपको अलग से कुछ करने की आवश्यकता नहीं होती।
3. TypeScript कॉन्फ़िगरेशन (TypeScript Configuration)
प्रोजेक्ट में tsconfig.json फ़ाइल पहले से उपलब्ध होगी। आप इसे अपनी आवश्यकताओं के अनुसार संपादित कर सकते हैं।
4. React कंपोनेंट्स (React Components)
4.1 फंक्शनल कंपोनेंट्स (Functional Components)
फंक्शनल कंपोनेंट्स TypeScript में फंक्शन सिंटेक्स का उपयोग करके बनाए जाते हैं। हम React.FC (Functional Component) टाइप का उपयोग कर सकते हैं।
4.2 क्लास कंपोनेंट्स (Class Components)
क्लास कंपोनेंट्स TypeScript में क्लास सिंटेक्स का उपयोग करके बनाए जाते हैं। हम React.Component टाइप का उपयोग कर सकते हैं।
5. प्रॉप्स और स्टेट के साथ टाइपिंग (Typing Props and State)
TypeScript में, हम प्रॉप्स और स्टेट को टाइप करने के लिए इंटरफेसेस का उपयोग कर सकते हैं।
6. इवेंट हैंडलिंग (Event Handling)
TypeScript में इवेंट्स को टाइप करने के लिए, हम React के इवेंट इंटरफेसेस का उपयोग कर सकते हैं।
7. React और TypeScript के साथ फॉर्म्स (Forms with React and TypeScript)
TypeScript में फॉर्म हैंडलिंग के लिए, हम फॉर्म इवेंट्स और फॉर्म इनपुट्स को टाइप कर सकते हैं।
TypeScript के साथ Node.js (Node.js with TypeScript)
TypeScript के साथ Node.js का उपयोग करना एक शक्तिशाली संयोजन है जो आपको सर्वर-साइड एप्लिकेशन विकसित करने में टाइप-सुरक्षित और प्रबंधनीय कोड लिखने की अनुमति देता है। इस सेक्शन में, हम देखेंगे कि कैसे एक नया Node.js प्रोजेक्ट सेटअप करें और उसमें TypeScript को जोड़ें। हम TypeScript के साथ Node.js का उपयोग करके REST APIs बनाने के विभिन्न तरीकों को भी जानेंगे।
1. नया Node.js प्रोजेक्ट बनाएँ (Create a New Node.js Project)
सबसे पहले, एक नई डायरेक्टरी बनाएँ और उसमें जाएँ:
2. NPM इनिशियलाइज़ करें (Initialize NPM)
अब अपने प्रोजेक्ट को NPM के साथ इनिशियलाइज़ करें:
यह एक package.json फ़ाइल बनाएगा जो आपके प्रोजेक्ट की डिपेंडेंसीज़ को मैनेज करेगा।
3. TypeScript को इंस्टॉल करें (Install TypeScript)
TypeScript और आवश्यक टाइप डिफिनिशंस को प्रोजेक्ट में इंस्टॉल करने के लिए निम्नलिखित कमांड का उपयोग करें:
4. TypeScript कॉन्फ़िगरेशन बनाएँ (Create TypeScript Configuration)
TypeScript प्रोजेक्ट को कॉन्फ़िगर करने के लिए, एक tsconfig.json फ़ाइल बनाएँ। इसे बनाने के लिए निम्नलिखित कमांड का उपयोग करें:
यह कमांड एक tsconfig.json फ़ाइल बनाएगी जिसमें TypeScript के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन सेटिंग्स होंगी।
5. tsconfig.json कॉन्फ़िगर करें (Configure tsconfig.json)
tsconfig.json फ़ाइल को अपनी आवश्यकताओं के अनुसार संपादित करें। एक साधारण कॉन्फ़िगरेशन इस प्रकार हो सकता है:
6. प्रोजेक्ट स्ट्रक्चर बनाएँ (Create Project Structure)
प्रोजेक्ट डायरेक्टरी में src नामक एक फोल्डर बनाएँ। यह वह फोल्डर होगा जहाँ आप अपने TypeScript कोड को रखेंगे।
7. TypeScript कोड लिखें (Write TypeScript Code)
अब, src फोल्डर में एक TypeScript फ़ाइल बनाएँ और उसमें कोड लिखें। उदाहरण के लिए, index.ts नाम की एक फ़ाइल बनाएं:
8. TypeScript कोड को रन करें (Run TypeScript Code)
TypeScript कोड को रन करने के लिए, निम्नलिखित कमांड का उपयोग करें:
आपको आउटपुट के रूप में “Server running at http://127.0.0.1:3000/” संदेश दिखाई देगा।
9. Express.js के साथ REST API बनाएँ (Create REST API with Express.js)
Express.js को प्रोजेक्ट में इंस्टॉल करें:
src फोल्डर में एक नई फ़ाइल app.ts बनाएं और उसमें REST API बनाने के लिए कोड लिखें:
10. package.json में स्क्रिप्ट जोड़ें (Add Scripts in package.json)
package.json फ़ाइल में TypeScript कोड को कंपाइल और रन करने के लिए स्क्रिप्ट जोड़ें:
11. TypeScript कोड को कंपाइल करें (Compile TypeScript Code)
TypeScript कोड को JavaScript में कंपाइल करने के लिए, निम्नलिखित कमांड का उपयोग करें:
12. कंपाइल्ड कोड को रन करें (Run Compiled Code)
कंपाइल्ड JavaScript कोड को रन करने के लिए, निम्नलिखित कमांड का उपयोग करें:
आपको आउटपुट के रूप में “Server is running at http://localhost:3000” संदेश दिखाई देगा।