TypeScript त्रुटि string | undefined: इसे कैसे ठीक करें और पागल न हों

परिचय: «Type 'string | undefined' is not assignable to type 'string'» — एक परिचित दर्द?

यदि आप कम से कम एक सप्ताह से TypeScript में लिख रहे हैं, तो आपने निश्चित रूप से यह संदेश देखा होगा। यह सबसे अप्रत्याशित क्षण में प्रकट होता है: आपको यकीन है कि वेरिएबल एक स्ट्रिंग है, लेकिन कंपाइलर हठपूर्वक कहता है: «अरे, वहाँ undefined हो सकता है!»। परिचित लगता है?

यह त्रुटि Stack Overflow पर सबसे सामान्य प्रश्नों में से एक है (हजारों व्यूज, दर्जनों उत्तर)। और ऐसा नहीं है कि TypeScript «बेवकूफ» है। इसके विपरीत: यह आपको रनटाइम में बग्स से बचाता है जो आपके एप्लिकेशन को क्रैश कर सकते हैं। लेकिन कंपाइलर को यह कैसे समझाएं? कोड को सुरक्षित और पठनीय दोनों कैसे बनाएं?

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

\n
• त्रुटि Type 'string | undefined' is not assignable to type 'string' क्यों होती है
\n
• इसे ठीक करने के 5 कार्यशील तरीके (सरल से उन्नत तक)
\n
• शुरुआती लोगों के सामान्य जाल
\n
• ! (non-null assertion) का उपयोग कब करें, और ?? (nullish coalescing) का उपयोग कब करना बेहतर है
\n

तैयार हैं? चलिए शुरू करते हैं!

1. TypeScript में यह त्रुटि क्यों होती है?

JavaScript में, एक वेरिएबल किसी भी क्षण undefined हो सकता है। TypeScript, विशेष रूप से strictNullChecks फ्लैग चालू होने पर, चाहता है कि आप स्पष्ट रूप से बताएं: «मुझे पता है कि यहाँ खालीपन हो सकता है, और मैं इसके साथ काम कर रहा हूँ»।

एक सरल उदाहरण देखें:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user.name; // त्रुटि! user undefined हो सकता है\n}\n

विधि find() User | undefined लौटाती है। यदि उपयोगकर्ता नहीं मिलता है, तो undefined वापस आएगा। TypeScript इसे देखता है और चिल्लाता है: «तुम string | undefined को string में असाइन करने की कोशिश कर रहे हो! ऐसा नहीं कर सकते!»।

यह TypeScript का बग नहीं है, यह एक विशेषता है। यह आपको सोचने पर मजबूर करता है: «क्या होगा अगर उपयोगकर्ता मौजूद नहीं है? फ़ंक्शन क्या लौटाएगा? एक खाली स्ट्रिंग? एक त्रुटि फेंकेगा?»। और यह सही है।

2. त्रुटि को ठीक करने के 5 तरीके (सरल से जटिल तक)

2.1. Non-null assertion ऑपरेटर (!)

सबसे तेज़ (और सबसे खतरनाक) तरीका है TypeScript से कहना: «चुप रहो, मुझे पता है मैं क्या कर रहा हूँ»।

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user!.name; // ! — मुझे यकीन है कि user undefined नहीं है\n}\n

कब उपयोग करें: केवल तभी जब आप पूरी तरह से आश्वस्त हों कि मान मौजूद है। उदाहरण के लिए, यदि आपने अभी-अभी इस उपयोगकर्ता को ऐरे में जोड़ा है और निश्चित रूप से जानते हैं कि find इसे ढूंढ लेगा।

कब उपयोग न करें: 90% मामलों में। यह कार में एयरबैग को बंद करने जैसा है — काम करता है, लेकिन जोखिम बहुत अधिक है।

2.2. if (type guard) के माध्यम से जाँच

क्लासिक और सुरक्षित तरीका:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    if (user) {\n        return user.name; // TypeScript जानता है: ब्लॉक के अंदर user निश्चित रूप से User है\n    }\n    return 'अतिथि'; // फ़ॉलबैक\n}\n

TypeScript स्मार्ट है: if (user) जाँच के बाद यह टाइप को «संकीर्ण» करता है। ब्लॉक के अंदर user User है, न कि User | undefined।

2.3. वैकल्पिक श्रृंखला ऑपरेटर (?.) फ़ॉलबैक के साथ

नेस्टेड ऑब्जेक्ट्स के साथ काम करने के लिए एक सुरुचिपूर्ण एक-लाइनर:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user?.name ?? 'अतिथि';\n}\n

इसे विस्तार से समझते हैं:

\n
• user?.name — यदि user undefined है, तो बिना त्रुटि के undefined लौटाता है
\n
• ?? 'अतिथि' — यदि बाईं ओर undefined या null है, तो 'अतिथि' डालें
\