टाइपस्क्रिप्ट स्कूल ऑफ मैजिक: जेनेरिक एंड टाइप एक्सटेंशन

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

समय के साथ, इस सामग्री के लेखक ने महसूस किया कि हर बार जब वह संकलन चरण में पाई गई त्रुटियों को दरकिनार करता है, तो वह अपने कोड में एक समय बम डालता है जो कार्यक्रम के निष्पादन के दौरान फट सकता है। हर बार जब वह as any निर्माण के as any एक सरल का उपयोग करते हुए त्रुटियों के साथ "संघर्ष" as any था, तो उसे कई घंटों के कठिन डिबगिंग के साथ भुगतान करना पड़ता था।



नतीजतन, वह इस निष्कर्ष पर पहुंचे कि ऐसा न करना बेहतर है। उसने संकलक से दोस्ती की, उसके संकेतों पर ध्यान देना शुरू किया। संकलक कोड में समस्याओं का पता लगाता है और वास्तविक नुकसान पहुंचाने से पहले उन्हें रिपोर्ट करता है। लेख के लेखक ने खुद को एक डेवलपर के रूप में देखते हुए महसूस किया कि संकलक उसका सबसे अच्छा दोस्त है, क्योंकि यह उसे खुद से बचाता है। अल्बस डंबलडोर के शब्दों को कोई कैसे याद नहीं कर सकता है: "अपने दुश्मनों के खिलाफ बोलने के लिए बहुत साहस चाहिए, लेकिन अपने दोस्तों के खिलाफ बोलने के लिए इससे कम नहीं।"

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

यह सामग्री दो स्थितियों पर केंद्रित है। उनमें any प्रकार के उपयोग से बचने से, आप कोड के प्रकार की सुरक्षा सुनिश्चित कर सकते हैं, इसके पुन: उपयोग की संभावनाएं खोल सकते हैं और इसे सहज बना सकते हैं।

जेनरिक

मान लीजिए हम एक स्कूल के डेटाबेस पर काम कर रहे हैं। हमने एक बहुत ही सुविधाजनक सहायक फ़ंक्शन getBy लिखा है। अपने नाम से छात्र का प्रतिनिधित्व करने वाली वस्तु प्राप्त करने के लिए, हम फॉर्म getBy(model, "name", "Harry") एक कमांड का उपयोग कर सकते हैं। आइए इस तंत्र के कार्यान्वयन पर एक नज़र डालें (यहां, कोड को जटिल नहीं करने के लिए, डेटाबेस को एक साधारण सरणी द्वारा दर्शाया गया है)।

 type Student = { name: string; age: number; hasScar: boolean; }; const students: Student[] = [ { name: "Harry", age: 17, hasScar: true }, { name: "Ron", age: 17, hasScar: false }, { name: "Hermione", age: 16, hasScar: false } ]; function getBy(model, prop, value) {   return model.filter(item => item[prop] === value)[0] } 

जैसा कि आप देख सकते हैं, हमारे पास एक अच्छा कार्य है, लेकिन यह प्रकार एनोटेशन का उपयोग नहीं करता है, और उनकी अनुपस्थिति का मतलब यह भी है कि इस तरह के फ़ंक्शन को टाइप-सुरक्षित नहीं कहा जा सकता है। इसे ठीक करें।

 function getBy(model: Student[], prop: string, value): Student | null {   return model.filter(item => item[prop] === value)[0] || null } const result = getBy(students, "name", "Hermione") // result: Student 

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

टाइपस्क्रिप्ट में, अन्य दृढ़ता से टाइप की गई भाषाओं की तरह, हम जेनरिक का उपयोग कर सकते हैं, जिसे "सामान्य प्रकार", "सार्वभौमिक प्रकार", "सामान्यीकरण" भी कहा जाता है।

एक सामान्य नियमित चर के समान है, लेकिन कुछ मूल्य के बजाय, इसमें एक प्रकार की परिभाषा होती है। हम अपने फ़ंक्शन के कोड को फिर से लिखते हैं ताकि Student प्रकार के बजाय यह सार्वभौमिक प्रकार T उपयोग करे T

 function getBy<T>(model: T[], prop: string, value): T | null {   return model.filter(item => item[prop] === value)[0] } const result = getBy<Student>(students, "name", "Hermione") // result: Student 

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

तो अब हमारे पास पुन: उपयोग के लिए उपयुक्त एक विश्वसनीय सहायक कार्य है। हालाँकि, यह अभी भी सुधार किया जा सकता है। क्या होगा यदि दूसरे पैरामीटर में प्रवेश करते समय कोई त्रुटि होती है और "name" बजाय "name" प्रतीत होता है? फ़ंक्शन ऐसा व्यवहार करेगा जैसे कि आप जिस छात्र की तलाश कर रहे हैं, वह बस डेटाबेस में नहीं है, और सबसे अप्रिय रूप से, यह किसी भी त्रुटि का उत्पादन नहीं करेगा। इसके परिणामस्वरूप लंबी अवधि के डिबगिंग हो सकते हैं।

ऐसी त्रुटियों से बचाने के लिए, हम एक और सार्वभौमिक प्रकार का परिचय देते हैं, P इसके अलावा, यह आवश्यक है कि P टाइप T की एक कुंजी हो, इसलिए, यदि Student यहां उपयोग किया जाता है, तो यह आवश्यक है कि P स्ट्रिंग "name" , "age" या "hasScar" । यहाँ यह कैसे करना है।

 function getBy<T, P extends keyof T>(model: T[], prop: P, value): T | null {   return model.filter(item => item[prop] === value)[0] || null } const result = getBy(students, "naem", "Hermione") // Error: Argument of type '"naem"' is not assignable to parameter of type '"name" | "age" | "hasScar"'. 

जेनेरिक और keyof का उपयोग करना एक बहुत शक्तिशाली चाल है। यदि आप एक आईडीई में प्रोग्राम लिखते हैं जो टाइपस्क्रिप्ट का समर्थन करता है, तो तर्कों को दर्ज करके, आप स्वतः पूर्णता क्षमताओं का लाभ उठा सकते हैं, जो बहुत सुविधाजनक है।

हालाँकि, हमने अभी तक getBy फ़ंक्शन पर काम नहीं किया है। उसका एक तीसरा तर्क है, जिसका प्रकार हमने अभी तक निर्धारित नहीं किया है। यह हमें बिल्कुल भी शोभा नहीं देता। अब तक, हम पहले से नहीं जान सकते थे कि यह किस प्रकार का होना चाहिए, क्योंकि यह इस बात पर निर्भर करता है कि हम दूसरे तर्क के रूप में क्या पास करते हैं। लेकिन अब, चूंकि हमारे पास P टाइप है, हम गतिशील रूप से तीसरे तर्क के लिए टाइप कर सकते हैं। तीसरे तर्क का प्रकार अंततः T[P] । नतीजतन, अगर T Student , और P की "age" , तो T[P] टाइप number ।

 function getBy<T, P extends keyof T>(model: T[], prop: P, value: T[P]): T | null {   return model.filter(item => item[prop] === value)[0] || null } const result = getBy(students, "age", "17") // Error: Argument of type '"17"' is not assignable to parameter of type 'number'. const anotherResult = getBy(students, "hasScar", "true") // Error: Argument of type '"true"' is not assignable to parameter of type 'boolean'. const yetAnotherResult = getBy(students, "name", "Harry") //      

मुझे उम्मीद है कि अब आपको टाइपस्क्रिप्ट में जेनरिक का उपयोग करने के तरीके के बारे में पूरी तरह से स्पष्ट समझ है, लेकिन अगर आप यहां बताए गए कोड के साथ प्रयोग करना चाहते हैं, तो आप यहां पर एक नज़र डाल सकते हैं।

मौजूदा प्रकार का विस्तार

कभी-कभी हम उन डेटा या कार्यक्षमता को जोड़ने की आवश्यकता का सामना कर सकते हैं जिनके इंटरफेस को हम बदल नहीं सकते। आपको मानक ऑब्जेक्ट को बदलने की आवश्यकता हो सकती है, कह सकते हैं - window ऑब्जेक्ट में कुछ संपत्ति जोड़ें, या Express जैसे कुछ बाहरी पुस्तकालय के व्यवहार का विस्तार करें। और दोनों ही मामलों में, आपके पास उस वस्तु को सीधे प्रभावित करने की क्षमता नहीं है जिसके साथ आप काम करना चाहते हैं।

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

यदि हम Array प्रोटोटाइप में एक फ़ंक्शन जोड़ने का प्रयास करते हैं, तो संकलक को यह बहुत पसंद नहीं आएगा:

 Array.prototype.getBy = function <T, P extends keyof T>(   this: T[],   prop: P,   value: T[P] ): T | null { return this.filter(item => item[prop] === value)[0] || null; }; // Error: Property 'getBy' does not exist on type 'any[]'. const bestie = students.getBy("name", "Ron"); // Error: Property 'getBy' does not exist on type 'Student[]'. const potionsTeacher = (teachers as any).getBy("subject", "Potions") //  ...   ? 

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

बेहतर होगा कि Array टाइप को बढ़ाया जाए, लेकिन ऐसा करने से पहले, आइए इस बारे में बात करें कि टाइपस्क्रिप्ट स्थितियों को कैसे संभालता है जब एक ही प्रकार के दो इंटरफेस कोड में मौजूद हों। यहां कार्रवाई की एक सरल योजना लागू की गई है। यदि संभव हो तो विज्ञापन संयोजित किए जाएंगे। यदि आप उन्हें संयोजित नहीं कर सकते, तो सिस्टम एक त्रुटि देगा।

तो यह कोड काम करता है:

 interface Wand { length: number } interface Wand {   core: string } const myWand: Wand = { length: 11, core: "phoenix feather" } //  ! 

और यह एक नहीं है:

 interface Wand { length: number } interface Wand {   length: string } // Error: Subsequent property declarations must have the same type.  Property 'length' must be of type 'number', but here has type 'string'. 

अब, इससे निपटने के बाद, हम देखते हैं कि हम एक सरल कार्य के साथ सामना कर रहे हैं। अर्थात्, हम सभी को Array<T> इंटरफ़ेस घोषित करना होगा और getBy फ़ंक्शन को इसमें जोड़ना होगा।

 interface Array<T> {  getBy<P extends keyof T>(prop: P, value: T[P]): T | null; } Array.prototype.getBy = function <T, P extends keyof T>(   this: T[],   prop: P,   value: T[P] ): T | null { return this.filter(item => item[prop] === value)[0] || null; }; const bestie = students.getBy("name", "Ron"); //   ! const potionsTeacher = (teachers as any).getBy("subject", "Potions") //     

कृपया ध्यान दें कि अधिकांश कोड आपको मॉड्यूल फ़ाइलों में लिखने की संभावना है, इसलिए, Array इंटरफ़ेस में परिवर्तन करने के लिए, आपको वैश्विक दायरे तक पहुंच की आवश्यकता होगी। आप declare global प्रकार के अंदर परिभाषा रखकर ऐसा कर सकते हैं। उदाहरण के लिए, इस तरह:

 declare global {   interface Array<T> {       getBy<P extends keyof T>(prop: P, value: T[P]): T | null;   } } 

यदि आप किसी बाहरी लाइब्रेरी के इंटरफ़ेस का विस्तार करने जा रहे हैं, तो आपको सबसे अधिक संभावना इस लाइब्रेरी के namespace तक पहुँच की होगी। Express लाइब्रेरी से Request करने के लिए userId फ़ील्ड को जोड़ने का तरीका इस प्रकार है:

 declare global { namespace Express {   interface Request {     userId: string;   } } } 

आप इस अनुभाग में कोड के साथ यहां प्रयोग कर सकते हैं ।

परिणाम

इस लेख में, हमने टाइपस्क्रिप्ट में जेनेरिक और टाइप एक्सटेंशन का उपयोग करने के लिए तकनीकों को देखा। हम आशा करते हैं कि आज आपने जो सीखा है वह आपको विश्वसनीय, समझने योग्य और टाइप-सुरक्षित कोड लिखने में मदद करेगा।

प्रिय पाठकों! आप टाइपस्क्रिप्ट में किसी भी प्रकार के बारे में कैसा महसूस करते हैं?