TypeScript में JSON: कास्ट करते समय 5 घातक गलतियाँ और उन्हें कैसे ठीक करें

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: "जादुई" टाइप कास्टिंग का मिथक

\n\n

हर TypeScript डेवलपर को देर-सबेर ऐसी स्थिति का सामना करना पड़ता है: आप सर्वर से JSON प्राप्त करते हैं, आपको इसकी संरचना के बारे में यकीन है, और आप as के माध्यम से एक सरल cast करते हैं। और... कुछ भी काम नहीं करता। क्लास के मेथड गायब हैं, फ़ील्ड undefined हैं, और डीबगिंग एक क्वेस्ट बन जाती है।

\n\n

सवाल "मैं JSON ऑब्जेक्ट को TypeScript क्लास में कैसे कास्ट करूँ?" Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है (दसियों हज़ार व्यूज़)। और यह आश्चर्यजनक नहीं है। TypeScript एक ऐड-ऑन है जो केवल कंपाइलेशन के दौरान मौजूद रहता है। Runtime में, आपकी "क्लास" सिर्फ एक plain JavaScript object है।

\n\n

इस लेख में, हम 5 सबसे सामान्य और खतरनाक गलतियों पर चर्चा करेंगे जो डेवलपर्स JSON और TypeScript क्लासेस के साथ काम करते समय करते हैं। आप सीखेंगे कि उनसे कैसे बचा जाए, और production कोड के लिए तैयार समाधान प्राप्त करेंगे।

\n\n

गलती #1: "वास्तविक" कास्टिंग के लिए as का उपयोग करना

\n\n

सबसे आम जाल यह सोचना है कि jsonData as MyClass कंस्ट्रक्शन क्लास का एक इंस्टेंस बनाता है।

\n\n

वास्तव में क्या होता है?

\n

as ऑपरेटर (या angle-bracket सिंटैक्स) एक type assertion है। यह कंपाइलर से कहता है: "मुझ पर भरोसा करो, मैं टाइप जानता हूँ।" लेकिन JavaScript में, यह कोई जादू नहीं करता।

\n\n
class User {\n    name: string = '';\n    greet(): string {\n        return `नमस्ते, ${this.name}!`;\n    }\n}\n\nconst rawData = JSON.parse('{"name": "अन्ना"}');\nconst user = rawData as User;\n\nconsole.log(user.name); // "अन्ना" — काम करता है\nconsole.log(user.greet()); // TypeError: user.greet is not a function\n
\n\n

क्यों? क्योंकि rawData एक सामान्य ऑब्जेक्ट { name: 'अन्ना' } है। इसके पास User.prototype प्रोटोटाइप नहीं है, और इसलिए greet मेथड भी नहीं है।

\n\n

कैसे ठीक करें?

\n

हमेशा क्लास का एक वास्तविक इंस्टेंस बनाएँ। मूल तरीका है Object.assign:

\n\n
const user = Object.assign(new User(), rawData);\nconsole.log(user.greet()); // "नमस्ते, अन्ना!"\n
\n\n

लेकिन इस विधि की अपनी बारीकियाँ हैं, जिनके बारे में हम आगे बात करेंगे।

\n\n

गलती #2: नेस्टेड ऑब्जेक्ट्स और ऐरे को अनदेखा करना

\n\n

आप खुशी-खुशी Object.assign का उपयोग कर रहे हैं, लेकिन आपके डेटा में नेस्टेड स्ट्रक्चर हैं। और फिर नर्क शुरू होता है।

\n\n
class Address {\n    city: string = '';\n    zip: string = '';\n}\n\nclass Company {\n    name: string = '';\n    address: Address = new Address();\n}\n\nconst data = JSON.parse('{"name": "TechCorp", "address": {"city": "मॉस्को", "zip": "101000"}}');\nconst company = Object.assign(new Company(), data);\n\nconsole.log(company.address.city); // "मॉस्को" — किस्मत से?\nconsole.log(company.address instanceof Address); // false!\n
\n\n

समस्या: address एक सामान्य ऑब्जेक्ट बना रहता है, न कि Address का इंस्टेंस। यदि Address में मेथड या computed properties हैं, तो वे खो जाएँगी।

\n\n

समाधान: रिकर्सिव कास्टिंग

\n

एक फ़ैक्टरी फ़ंक्शन लिखें या class-transformer लाइब्रेरी का उपयोग करें:

\n\n
import { plainToClass } from 'class-transformer';\n\nconst company = plainToClass(Company, data);\nconsole.log(company.address instanceof Address); // true\n
\n\n

class-transformer सभी फ़ील्ड्स को रिकर्सिवली ट्रैवर्स करता है और @Type डेकोरेटर्स के आधार पर सही क्लास इंस्टेंस बनाता है।

\n\n

गलती #3: डिफ़ॉल्ट मानों का खो जाना

\n\n

TypeScript आपको क्लास में ही फ़ील्ड के डिफ़ॉल्ट मान सेट करने की अनुमति देता है। लेकिन JSON "कास्ट" के दौरान, ये मान undefined द्वारा ओवरराइट हो सकते हैं।

\n\n
class Config {\n    theme: string = 'light';\n    fontSize: number = 14;\n    language: string = 'ru';\n}\n\nconst partialData = JSON.parse('{"theme": "dark"}');\nconst config = Object.assign(new Config(), partialData);\n\nconsole.l                

ब्लॉग

पुस्तक अनुशंसाएँ