टाइपस्क्रिप्ट में वैकल्पिक चेनिंग
इस लेख में, हम टाइपस्क्रिप्ट में वैकल्पिक चेनिंग के बारे में बताते हैं।
YouTube Video
टाइपस्क्रिप्ट में वैकल्पिक चेनिंग
टाइपस्क्रिप्ट में वैकल्पिक चेनिंग एक उपयोगी सुविधा है जो गहराई में नेस्टेड ऑब्जेक्ट्स या एरेज़ की प्रॉपर्टीज़ तक पहुंचने के लिए उपयोगी है। यह सुविधा नॉनएग्ज़िस्टेंट प्रॉपर्टीज़ तक पहुंचते समय त्रुटियों को रोकती है, जिससे आप अधिक संक्षिप्त और पठनीय कोड लिख सकते हैं।
वैकल्पिक चेनिंग क्या है?
वैकल्पिक चेनिंग ऑपरेटर (?.) उस स्थिति में undefined लौटाता है जब आप किसी ऑब्जेक्ट की प्रॉपर्टी या मेथड को एक्सेस करते हैं जो मौजूद नहीं है। यह कोड को बिना त्रुटि दिखाए चलने की अनुमति देता है, भले ही प्रॉपर्टी मौजूद न हो।
उदाहरण के लिए, जब नेस्टेड ऑब्जेक्ट की प्रॉपर्टीज़ तक पहुंचा जाता है जैसा कि नीचे दिखाया गया है, तो सामान्य विधि का उपयोग करते समय अगर प्रॉपर्टी मौजूद नहीं है तो त्रुटि होती है।
उदाहरण
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- इस स्थिति में, यदि
addressमौजूद नहीं है तो एक त्रुटि उत्पन्न होगी। वैकल्पिक चेनिंग का उपयोग इसे रोकने के लिए किया जा सकता है।
वैकल्पिक चेनिंग का उपयोग करने का उदाहरण
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- वैकल्पिक चेनिंग का उपयोग त्रुटियों से बचने और प्रॉपर्टीज़ मौजूद न होने पर
undefinedलौटाने के लिए किया जाता है।
वैकल्पिक चेनिंग का उपयोग कैसे करें
वैकल्पिक चेनिंग का उपयोग विभिन्न संदर्भों में किया जा सकता है, जैसे प्रॉपर्टी एक्सेस, फ़ंक्शन कॉल्स, और एरे एक्सेस। हम इनमें से प्रत्येक का उपयोग कैसे करें, इसे समझाएंगे।
प्रॉपर्टीज़ तक पहुंच
आप ऑब्जेक्ट्स की नेस्टेड प्रॉपर्टीज़ तक सुरक्षित रूप से पहुंच सकते हैं।
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
यह कोड वैकल्पिक चेनिंग का उपयोग करता है ताकि company ऑब्जेक्ट में location प्रॉपर्टी मौजूद होने पर ही city और country प्रॉपर्टीज़ तक पहुँच सके।
फ़ंक्शन कॉल्स
वैकल्पिक चेनिंग किसी फ़ंक्शन को कॉल करने से पहले उसकी मौजूदगी जांच सकती है।
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
यह कोड वैकल्पिक चेनिंग का उपयोग करता है ताकि greet फंक्शन मौजूद होने पर ही उसे सुरक्षित रूप से कॉल किया जा सके। अगर फंक्शन डिफाइन नहीं भी है, तो भी कोई त्रुटि नहीं आती।
एरे एक्सेस
वैकल्पिक चेनिंग को एरे पर लागू किया जा सकता है यह जांचने के लिए कि क्या तत्व मौजूद हैं।
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
यह कोड केवल तब ऐरे एलिमेंट्स को एक्सेस करता है जब team.members मौजूद हो, और मौजूदा इंडेक्स के लिए मान लौटाता है, जबकि न मौजूद होने पर undefined लौटाता है।
वैकल्पिक चेनिंग और नलिश कोएलसिंग ऑपरेटर
वैकल्पिक चेनिंग undefined लौटाती है, लेकिन कभी-कभी यह पर्याप्त नहीं होता। इस स्थिति में, नलिश कोएलसिंग ऑपरेटर (??), जिसे TypeScript 3.7 में पेश किया गया था, का उपयोग null या undefined के लिए डिफ़ॉल्ट मान देने के लिए किया जा सकता है।
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
ऑप्शनल चेनिंग के साथ मिलाकर, आप और भी अधिक लचीला कोड लिख सकते हैं।
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
ऑप्शनल चेनिंग का उपयोग करते समय सावधानियां
वैकल्पिक चेनिंग का उपयोग करते समय, निम्न बातों का ध्यान रखना महत्वपूर्ण है:।
-
वैकल्पिक चेनिंग का अनावश्यक उपयोग
- ऐसी प्रॉपर्टीज़ या मेथड्स पर वैकल्पिक चेनिंग का उपयोग करना जो निश्चित रूप से मौजूद हैं, आपके कोड को अनावश्यक रूप से लंबा बना सकता है। इसका उपयोग केवल तब करना सबसे अच्छा है जब एक्सेस किए गए टारगेट का अस्तित्व अनिश्चित हो।
-
टाइपो ग्राफिक त्रुटियाँ
- वैकल्पिक चेनिंग का अत्यधिक उपयोग टाइपिंग में हुई त्रुटियों को पहचानना कठिन बना सकता है, जिससे अनचाही प्रॉपर्टीज़ ऐक्सेस हो सकती हैं। उचित टाइप चेक करें और इसे सावधानी से उपयोग करें।
कोड सारांश
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
सारांश
TypeScript में ऑप्शनल चेनिंग गहराई से नेस्ट किए गए ऑब्जेक्ट्स या ऐरे को एक्सेस करते समय त्रुटियों से बचते हुए सटीक कोड प्रदान करती है। इसके अलावा, जब इसे नलिश कोएलसिंग ऑपरेटर के साथ जोड़ा जाता है, तो आप डिफ़ॉल्ट मान सेट कर सकते हैं और अधिक लचीला लॉजिक बना सकते हैं। उचित उपयोग किए जाने पर, यह कोड की सुरक्षा और पठनीयता को महत्वपूर्ण रूप से सुधार सकता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।