🚿 🦓 ⛅️ टाइपस्क्रिप्ट डेवलपर की 5 आज्ञाएँ 🎍 🧤 👩🏻‍🍳

अधिक से अधिक प्रोजेक्ट और टीम टाइपस्क्रिप्ट का उपयोग कर रहे हैं। हालाँकि, बस टाइपस्क्रिप्ट को लागू करना और उसमें से सबसे निचोड़ना बहुत अलग चीजें हैं।

मैं आपके लिए टाइपस्क्रिप्ट का उपयोग करने के लिए उच्च-स्तरीय सर्वोत्तम प्रथाओं की एक सूची प्रस्तुत करता हूं जो आपको इस भाषा से सबसे अधिक प्राप्त करने में मदद करेंगे।

झूठ मत बोलो

प्रकार एक अनुबंध है। इसका क्या मतलब है? जब आप किसी फ़ंक्शन को कार्यान्वित करते हैं, तो इसका प्रकार अन्य डेवलपर्स (या भविष्य में खुद के लिए!) का वादा हो जाता है, जिसे जब बुलाया जाता है, तो यह फ़ंक्शन एक निश्चित प्रकार का मान लौटाएगा।

निम्न उदाहरण में, getUser फ़ंक्शन का प्रकार यह सुनिश्चित करता है कि यह एक ऐसी वस्तु लौटाता है जिसमें हमेशा दो गुण होते हैं: name और age ।

 interface User { name: string; age: number; } function getUser(id: number): User { /* ... */ }

टाइपस्क्रिप्ट एक बहुत ही लचीली भाषा है। भाषा के परिचय को सुविधाजनक बनाने के लिए इसमें कई समझौते किए गए हैं। उदाहरण के लिए, यह आपको getUser फ़ंक्शन को इस तरह लागू करने की अनुमति देता है:

 function getUser(id: number): User { return { age: 12 } as User; }

ऐसा मत करो! यह एक FALSE है। इस तरह के कोड का निर्माण करके, आप अन्य डेवलपर्स के लिए LIE (जो अपने कार्यों में अपने फ़ंक्शन का उपयोग करेंगे)। उन्हें उम्मीद है कि getUser द्वारा लौटाए गए ऑब्जेक्ट में हमेशा किसी प्रकार का name फ़ील्ड होगा। लेकिन वह वहाँ नहीं है! इसके अलावा, जब आपका सहकर्मी getUser(1).name.toString() लिखता है तो क्या होता है? आप अच्छी तरह से जानते हैं कि ...

यहाँ, ज़ाहिर है, झूठ स्पष्ट लगता है। हालांकि, एक बड़े कोड बेस के साथ काम करते हुए, आप अक्सर अपने आप को उन स्थितियों में पाएंगे जहां आप जिस मूल्य पर लौटना चाहते हैं (या पास) लगभग अपेक्षित प्रकार से मेल खाते हैं। टाइप मिसमैच का कारण जानने में समय और मेहनत लगती है , और आप जल्दी में होते हैं ... इसलिए आप टाइप कास्टिंग का उपयोग करने का निर्णय लेते हैं।

हालाँकि, ऐसा करने से, आप पवित्र अनुबंध को तोड़ रहे हैं। यह हमेशा समय लेने के लिए बेहतर है और यह समझें कि प्रकार का उपयोग करने की तुलना में प्रकार क्यों मेल नहीं खाते हैं। यह बहुत संभावना है कि कुछ रनटाइम बग सतह के नीचे छिपा हो।

झूठ मत बोलो। अपने अनुबंधों का पालन करें।

सटीक रहें

प्रकार प्रलेखन हैं। किसी फ़ंक्शन का दस्तावेजीकरण करते समय, क्या आप अधिक से अधिक जानकारी नहीं बताना चाहते हैं?

 //   function getUser(id) { /* ... */ } //     : name  age function getUser(id) { /* ... */ } //  id       id , //     : name  age. //     undefined. function getUser(id) { /* ... */ }

getUser फ़ंक्शन के लिए कौन सी टिप्पणी आपको अधिक पसंद getUser ? जितना अधिक आप जानते हैं कि एक फ़ंक्शन लौटता है, उतना ही बेहतर है। उदाहरण के लिए, यह जानते हुए कि यह undefined लौट सकता है, आप इस बात की जांच करने के लिए एक ब्लॉक लिख सकते हैं कि इस वस्तु के गुणों का अनुरोध करने से पहले जिस वस्तु को लौटाया गया है वह परिभाषित है या नहीं।

प्रकारों के साथ समान रूप से: अधिक सटीक रूप से एक प्रकार का वर्णन किया गया है, जितनी अधिक जानकारी यह बताती है।

 function getUserType(id: number): string { /* ... */ } function getUserType(id: number): 'standard' | 'premium' | 'admin' { /* ... */ }

getUserType फ़ंक्शन getUserType दूसरा संस्करण बहुत अधिक जानकारीपूर्ण है, और इसलिए कॉलर बहुत अधिक सुविधाजनक स्थिति में है। यदि आप शायद जानते हैं तो मूल्य को संसाधित करना आसान है (अनुबंध, याद?) यह तीन दी गई लाइनों में से एक होगा, और न केवल एक पंक्ति। जो आप निश्चित रूप से जानते हैं, उसके साथ शुरू करने के लिए - एक मूल्य एक स्ट्रिंग नहीं हो सकता।

आइए एक अधिक वास्तविक उदाहरण पर विचार करें। State प्रकार घटक की स्थिति का वर्णन करता है जो बैकएंड से कुछ डेटा का अनुरोध करता है। क्या यह प्रकार सही है?

 interface State { isLoading: boolean; data?: string[]; errorMessage?: string; }

इस प्रकार का उपयोग करने वाले ग्राहक को राज्य संपत्ति मूल्यों के कुछ अप्रत्याशित संयोजन को संभालना चाहिए। उदाहरण के लिए, एक स्थिति असंभव है जब data और errorMessage गुण एक साथ परिभाषित किए जाते हैं: एक डेटा अनुरोध या तो सफल या विफल हो सकता है।

भेदभाव रहित संघ प्रकारों की सहायता से हम टाइप को अधिक सटीक बना सकते हैं:

 type State = | { status: 'loading' } | { status: 'successful', data: string[] } | { status: 'failed', errorMessage: string };

अब इस प्रकार का उपयोग करने वाले ग्राहक के पास बहुत अधिक जानकारी है: उसे अब संपत्तियों के गलत संयोजन को संसाधित करने की आवश्यकता नहीं है।

सटीक रहें। अपने प्रकारों पर अधिक से अधिक जानकारी पास करें।

प्रकार से शुरू करें

चूंकि प्रकार एक अनुबंध और प्रलेखन दोनों हैं, वे आपके कार्यों (या विधियों) को डिजाइन करने के लिए महान हैं।

इंटरनेट पर कई लेख हैं जो प्रोग्रामर को कोड लिखने से पहले सोचने की सलाह देते हैं। मैं इस दृष्टिकोण को पूरी तरह से साझा करता हूं। कोड पर सीधे कूदने का प्रलोभन बहुत अच्छा है, लेकिन यह अक्सर खराब निर्णय होता है। कार्यान्वयन के बारे में सोचने में थोड़ा समय हमेशा सुंदर रूप से चुकता होता है।

इस प्रक्रिया में प्रकार अत्यंत उपयोगी होते हैं। सोचने से आपकी समस्या को हल करने से संबंधित फ़ंक्शन प्रकारों के हस्ताक्षर का निर्माण होता है। और यह बहुत अच्छा है, क्योंकि आप इस बात पर ध्यान केंद्रित करते हैं कि आपके कार्य क्या करते हैं, इस बारे में सोचने के बजाय कि वे इसे कैसे करते हैं।

रिएक्ट जेएस में हायर ऑर्डर कंपोनेंट्स (HOC) की अवधारणा है। ये ऐसे कार्य हैं जो किसी तरह से दिए गए घटक का विस्तार करते हैं। उदाहरण के लिए, आप एक उच्च-क्रम घटक withLoadingIndicator बना सकते हैं जो किसी मौजूदा घटक में लोडिंग संकेतक जोड़ता है।

आइए इस फ़ंक्शन के लिए एक प्रकार का हस्ताक्षर लिखें। फ़ंक्शन एक घटक इनपुट को स्वीकार करता है और एक घटक भी लौटाता है। एक घटक का प्रतिनिधित्व करने के लिए, हम प्रतिक्रिया ComponentType प्रकार का उपयोग कर सकते हैं।

ComponentType एक सामान्य प्रकार है, जो घटक गुणों के प्रकार द्वारा पैरामीटर किया जाता है। withLoadingIndicator एक घटक को स्वीकार करता है और एक नया घटक देता है जो मूल घटक या लोडिंग संकेतक को प्रदर्शित करता है। नई तार्किक संपत्ति - isLoading के मूल्य के आधार पर क्या प्रदर्शित किया जाए, इस पर निर्णय लिया गया। इस प्रकार, दिए गए घटक को मूल एक के समान गुणों की आवश्यकता होती है, केवल नई isLoading संपत्ति जोड़ी जाती है।

हम टाइप को अंतिम रूप देंगे। withLoadingIndicator टाइप का एक घटक स्वीकार करता है ComponentType<P> , जहाँ P संपत्ति के प्रकार को दर्शाता है। withLoadingIndicator P & { isLoading: boolean } प्रकार के उन्नत गुणों वाला एक घटक देता है।

 const withLoadingIndicator = <P>(Component: ComponentType<P>) : ComponentType<P & { isLoading: boolean }> => ({ isLoading, ...props }) => { /* ... */ }

कार्यों के प्रकारों के साथ व्यवहार करते हुए, हमें यह सोचने के लिए मजबूर किया गया कि इसके इनपुट पर क्या होगा और आउटपुट पर क्या होगा। दूसरे शब्दों में, हमें एक फंक्शन डिजाइन करना था। अब इसका कार्यान्वयन लिखना आसान है।

प्रकारों से शुरू करें। प्रकारों को आपको पहले डिजाइन करने के लिए मजबूर करें, और उसके बाद ही कार्यान्वयन लिखें।

सख्ती बरतें

पहले तीन आज्ञाओं के लिए आपको विशेष प्रकार पर ध्यान देने की आवश्यकता होती है। सौभाग्य से, जब इस समस्या को हल करते हैं, तो आपको स्वयं सब कुछ नहीं करना होगा - अक्सर टाइपस्क्रिप्ट कंपाइलर आपको यह बताएंगे कि आपके प्रकार झूठ बोल रहे हैं या जब वे पर्याप्त सटीक नहीं हैं।

संकलक - --strict फ्लैग को शामिल करके आप इसे और भी बेहतर करने में मदद कर सकते हैं। यह एक मेटा फ़्लैग है --noImplicitAny सभी सख्त प्रकार के चेकिंग विकल्पों को --noImplicitAny करता है: --noImplicitAny , --noImplicitThis , --alwaysStrict , --strictBindCallApply , --strictNullChecks , --strictFunctionTypes और --strictPropertyInitialization ।

झंडे क्या करते हैं? सामान्यतया, उनके शामिल होने से टाइपस्क्रिप्ट संकलन त्रुटियों की संख्या में वृद्धि होती है। और यह अच्छा है! अधिक संकलन त्रुटियां - संकलक से अधिक सहायता।

आइए देखें कि कैसे - --strictNullChecks ध्वज को चालू करने से कोड में एक गलत का पता लगाने में मदद मिलती है।

 function getUser(id: number): User { if (id >= 0) { return { name: 'John', age: 12 }; } else { return undefined; } }

getUser प्रकार यह सुनिश्चित करता है कि फ़ंक्शन हमेशा User के प्रकार का एक ऑब्जेक्ट लौटाता है। हालांकि, कार्यान्वयन को देखें: एक फ़ंक्शन undefined भी लौट सकता है!

सौभाग्य से, एक संकलन त्रुटि में --strictNullChecks ध्वज परिणामों को सक्षम करना:

 Type 'undefined' is not assignable to type 'User'.

टाइपस्क्रिप्ट कंपाइलर झूठ का पता लगाता है। इस त्रुटि से छुटकारा पाने के लिए, बस ईमानदारी से पूरी सच्चाई बताएं:

 function getUser(id: number): User | undefined { /* ... */ }

प्रकार जाँच की कठोरता स्वीकार करें। संकलक आपको त्रुटियों से बचाता है।

अप टू डेट रखें

टाइपस्क्रिप्ट बहुत तेज गति से विकसित हो रहा है। हर दो महीने में एक नई रिलीज़ होती है। प्रत्येक रिलीज़ महत्वपूर्ण भाषा में सुधार और नई सुविधाएँ लाता है।

अक्सर ऐसा होता है कि भाषा की नई विशेषताएं आपको प्रकारों को अधिक सटीक रूप से परिभाषित करने और उन्हें अधिक सख्ती से जांचने की अनुमति देती हैं।

उदाहरण के लिए, संस्करण 2.0 में विभेदित संघ प्रकार पेश किए गए थे (मैंने कमांड में उनका उल्लेख सटीक किया है )।

वर्जन 3.2 ने कंपाइलर --strictBindCallApply पेश किया, जिसमें bind , call और कार्यों को apply लिए सही टाइपिंग शामिल है।

संस्करण 3.4 ने उच्च-क्रम वाले कार्यों में टाइप इंफ़ेक्शन में सुधार किया , जिससे कार्यात्मक शैली में कोड लिखते समय सटीक प्रकारों का उपयोग करना आसान हो गया।

मेरी स्थिति यह है कि टाइपस्क्रिप्ट के हाल के संस्करणों में शुरू की गई भाषा सुविधाओं को जानना वास्तव में इसके लायक है। अक्सर यह आपको सूची से अन्य चार आदेशों का पालन करने में मदद कर सकता है।

एक अच्छा प्रारंभिक बिंदु आधिकारिक टाइपस्क्रिप्ट रोडमैप है । Microsoft Devblog में टाइपस्क्रिप्ट अनुभाग की नियमित रूप से जाँच करना भी अच्छा होगा, क्योंकि सभी रिलीज़ घोषणाएँ वहाँ जाती हैं।

भाषा की नई विशेषताओं के साथ अद्यतित रहें, और इस ज्ञान को आपके लिए काम करने दें।

सारांश

मुझे आशा है कि आपको सूची उपयोगी लगी होगी। हमेशा की तरह और हर चीज में, किसी को भी इन आज्ञाओं का आँख बंद करके पालन नहीं करना चाहिए। लेकिन मुझे पूरा विश्वास है कि ये नियम आपको एक बेहतर टाइपस्क्रिप्ट डेवलपर बनाएंगे।

इस विषय पर आपके विचारों को टिप्पणियों में देखकर मुझे प्रसन्नता होगी।

बोनस

क्या आपको टाइपस्क्रिप्ट के बारे में यह लेख पसंद आया? मुझे यकीन है कि आप भी इस मुफ्त पीडीएफ को पसंद करेंगे: 10 टाइपस्क्रिप्ट विकास त्रुटियां जो आपके कोड को असुरक्षित बनाती हैं।

टाइपस्क्रिप्ट डेवलपर की 5 आज्ञाएँ