TypeScript त्रुटि TS2533: इसे कैसे हटाएं और इसके पीछे क्या है

परिचय: TypeScript खाली जगह पर क्यों चिल्लाता है?

आप TypeScript में कोड लिख रहे हैं, सब कुछ तार्किक लगता है, लेकिन अचानक कंपाइलर देता है: "error TS2533: Object is possibly 'null' or 'undefined'"। परिचित लग रहा है? यह त्रुटि शुरुआती लोगों के लिए सबसे आम "छिपी हुई समस्याओं" में से एक है। Stack Overflow के आंकड़ों के अनुसार, इसे दबाने के बारे में प्रश्न ने 100,000 से अधिक बार देखा गया है और यह एक क्लासिक बन गया है।

लेकिन आइए गहराई से देखें। TypeScript केवल "सख्त JavaScript" नहीं है। इसकी टाइप प्रणाली, विशेष रूप से strictNullChecks मोड, आपको उन मामलों को स्पष्ट रूप से संभालने के लिए मजबूर करती है जहाँ मान null या undefined हो सकता है। और यह कोई बग नहीं, बल्कि एक विशेषता है। TS2533 त्रुटि runtime-बग से सुरक्षा है, जो JavaScript में अक्सर Cannot read property of null की ओर ले जाते हैं।

इस लेख में हम समझेंगे:

\n
• strictNullChecks क्या है और यह "अंदर से" कैसे काम करता है
\n
• TS2533 त्रुटि क्यों होती है
\n
• इसे दबाने के 5 तरीके (सरल से उन्नत तक)
\n
• प्रत्येक तरीका कब उपयुक्त है और कब नहीं
\n

आइए TypeScript null त्रुटि को हमेशा के लिए समझना शुरू करें!

strictNullChecks अंदर से कैसे काम करता है

डिफ़ॉल्ट रूप से TypeScript (संस्करण 2.0 से) में विकल्प strictNullChecks सक्षम है। इसका क्या मतलब है? पहले, null और undefined को किसी भी प्रकार के उपप्रकार माना जाता था। यानी आप string प्रकार के वेरिएबल को null असाइन कर सकते थे — और TypeScript चुप रहता था। इसने कोड को सरल बनाया, लेकिन बग की ओर ले गया।

strictNullChecks मोड में, null और undefined प्रकार अलग-अलग इकाइयाँ हैं। string प्रकार का वेरिएबल केवल स्ट्रिंग ही रख सकता है। यदि आप null की अनुमति देना चाहते हैं, तो आपको स्पष्ट रूप से string | null निर्दिष्ट करना होगा।

उदाहरण: त्रुटि कैसी दिखती है

// उदाहरण 1: क्लासिक TS2533 त्रुटि\ninterface User {\n  name: string;\n  email?: string; // वैकल्पिक — undefined हो सकता है\n}\n\nfunction getUserEmail(user: User): string {\n  // त्रुटि TS2533: Object is possibly 'undefined'\n  return user.email.toUpperCase(); \n}\n\n// उदाहरण 2: DOM के साथ काम करना\nconst button = document.querySelector('button');\n// त्रुटि TS2533: Object is possibly 'null'\nbutton.addEventListener('click', () => console.log('clicked'));\n

दूसरे उदाहरण में, document.querySelector null लौटा सकता है यदि तत्व नहीं मिलता है। TypeScript चेतावनी देता है: "अरे, क्या आप सुनिश्चित हैं कि बटन मौजूद है?"

TS2533 त्रुटि को दबाने के 5 तरीके

अब सबसे महत्वपूर्ण बात पर आते हैं — त्रुटि को कैसे हटाएं। नीचे 5 सिद्ध विधियाँ दी गई हैं, सरल से उन्नत तक। स्थिति के अनुसार चुनें।

1. Non-null assertion operator (!)

सबसे तेज़ तरीका है अभिव्यक्ति के बाद विस्मयादिबोधक चिह्न ! लगाना। यह TypeScript को बताता है: "मुझे पता है कि यह null नहीं है, मुझ पर भरोसा करो।"

// दबाने के लिए ! का उपयोग करें\nconst button = document.querySelector('button')!;\nbutton.addEventListener('click', () => console.log('clicked'));\n\n// वैकल्पिक गुण के लिए\nfunction getUserEmail(user: User): string {\n  return user.email!.toUpperCase();\n}\n

कब उपयोग करें: जब आप पूरी तरह से सुनिश्चित हों कि मान null नहीं है। उदाहरण के लिए, यदि आपने अभी-अभी DOM में तत्व की उपस्थिति की जाँच की है। लेकिन सावधान रहें: यदि आप गलत हैं — तो आपको runtime-त्रुटि मिलेगी।

2. Optional chaining (?.) और nullish coalescing (??)

आधुनिक और सुरक्षित तरीका। ऑपरेटर ?. आपको केवल तभी गुण तक पहुँचने की अनुमति देता है जब ऑब्जेक्ट null/undefined न हो। और ?? डिफ़ॉल्ट मान सेट करता है।

function getUserEmail(user: User): string {\n  // यदि email undefined है — तो खाली स्ट्रिंग लौटाएँ\n  return user.email?.toUpperCase() ?? '';\n}\n\n// DOM के साथ काम करना\ndocument.querySelector('butt