हमने हाल ही में अपने MemSQL स्टूडियो सिस्टम से फ्लो से टाइपस्क्रिप्ट तक जावास्क्रिप्ट कोड की 30,000 लाइनें स्थानांतरित की हैं। इस लेख में मैं समझाऊंगा कि हमने कोड आधार क्यों पोर्ट किया, यह कैसे हुआ और क्या हुआ।

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

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

आम समस्याओं के बारे में भाषण:

इस तथ्य के कारण रनटाइम में त्रुटियों को टाइप करें कि कोड के विभिन्न हिस्सों का निहितार्थ प्रकारों से मिलान नहीं किया गया है।
इस तरह की तुच्छ चीजों के लिए परीक्षण का समय लिखने में बहुत समय व्यतीत होता है क्योंकि प्रकार के मापदंडों की जांच करना (रनटाइम में जांच करने से पैकेज का आकार भी बढ़ जाता है)।
संपादक / आईडीई एकीकरण की कमी है, क्योंकि स्थैतिक टाइपिंग के बिना जंप टू डेफिनिशन फ़ंक्शन, मैकेनिकल रीफैक्टरिंग और अन्य कार्यों को लागू करना अधिक कठिन है।
डेटा मॉडल के आसपास कोड लिखने का कोई तरीका नहीं है, अर्थात्, पहले डेटा प्रकार डिज़ाइन करें, और फिर कोड मूल रूप से "खुद लिखता है"।

ये केवल स्थैतिक टाइपिंग के कुछ लाभ हैं, जिन्हें हाल ही में फ्लो पर एक लेख में सूचीबद्ध किया गया है ।

2016 की शुरुआत में, हमने अपनी आंतरिक जावास्क्रिप्ट परियोजनाओं में से एक के क्रम में कुछ प्रकार की सुरक्षा को लागू करने के लिए tcomb को लागू किया (अस्वीकरण: मैंने इस परियोजना के साथ सौदा नहीं किया)। यद्यपि रनटाइम जाँच कभी-कभी उपयोगी होती है, लेकिन यह स्थिर टाइपिंग के सभी लाभ भी प्रदान नहीं करती है (रनटाइम में स्टैटिक टाइपिंग और टाइप चेकिंग का संयोजन कुछ मामलों के लिए उपयुक्त हो सकता है, io-ts आपको tcomb और टाइपस्क्रिप्ट के साथ ऐसा करने की अनुमति देता है, हालांकि मैंने कभी कोशिश नहीं की है )। इसे समझते हुए, हमने फ्लो को एक और परियोजना के लिए लागू करने का फैसला किया, जिसे हमने 2016 में शुरू किया था। उस समय, फ्लो एक शानदार विकल्प की तरह लग रहा था:

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

जब हमने 2017 के अंत में मेमक्यूएस स्टूडियो पर काम करना शुरू किया, तो हम पूरे एप्लिकेशन के प्रकारों को कवर करने जा रहे थे (यह पूरी तरह से जावास्क्रिप्ट में लिखा गया है: दोनों फ्रंटएंड और बैकएंड ब्राउज़र में निष्पादित होते हैं)। हमने फ्लो को एक उपकरण के रूप में लिया जिसे हमने अतीत में सफलतापूर्वक उपयोग किया है।

लेकिन मेरा ध्यान टाइपस्क्रिप्ट सपोर्ट के साथ बैबल 7 पर गया । इस रिलीज़ का मतलब था कि टाइपस्क्रिप्ट पर स्विच करने के लिए अब पूरे टाइपस्क्रिप्ट पारिस्थितिकी तंत्र में संक्रमण की आवश्यकता नहीं है, और आप जावास्क्रिप्ट के लिए बेबल का उपयोग जारी रख सकते हैं। इससे भी महत्वपूर्ण बात, हम टाइपस्क्रिप्ट का उपयोग केवल टाइप जाँच के लिए कर सकते हैं , न कि पूर्णरूपेण "भाषा" के रूप में।

व्यक्तिगत रूप से, मेरा मानना है कि कोड जनरेटर से टाइप चेकिंग को अलग करना, जावास्क्रिप्ट में टाइपिंग के स्थिर (और मजबूत) तरीके का एक और अधिक सुंदर तरीका है, क्योंकि:

हम कोड और टाइपिंग की समस्याओं को साझा करते हैं। यह टाइप-चेकिंग स्टॉप को कम करता है और विकास को गति देता है: यदि किसी कारण से टाइप-चेकिंग धीमा है, तो कोड अभी भी सही तरीके से उत्पन्न होगा (यदि आप बैबल के साथ tsc का उपयोग करते हैं, तो आप इसे करने के लिए इसे कॉन्फ़िगर कर सकते हैं)।
Babel में बहुत सारे प्लगइन्स और विशेषताएं हैं जो टाइपस्क्रिप्ट जनरेटर के पास नहीं हैं। उदाहरण के लिए, बैबल आपको समर्थित ब्राउज़र निर्दिष्ट करने की अनुमति देता है और स्वचालित रूप से उनके लिए कोड जारी करेगा। यह एक बहुत ही जटिल कार्य है और एक ही समय में दो अलग-अलग परियोजनाओं में इसका समर्थन करने का कोई मतलब नहीं है।
मुझे एक प्रोग्रामिंग भाषा के रूप में जावास्क्रिप्ट पसंद है (स्थैतिक टाइपिंग की कमी को छोड़कर), और मुझे पता नहीं है कि टाइपस्क्रिप्ट का कितना अस्तित्व होगा, जबकि मैं कई सालों के इम्मास्क्रिप्ट में विश्वास करता हूं। इसलिए, मैं जावास्क्रिप्ट में लिखना और "सोचना" पसंद करता हूं (ध्यान दें कि मैं कहता हूं कि "फ्लो में लिखें" या "टाइपस्क्रिप्ट" के बजाय "टाइपस्क्रिप्ट का उपयोग करें" या "टाइपस्क्रिप्ट" का उपयोग करें, क्योंकि मैं हमेशा उन्हें टूल के साथ प्रतिनिधित्व करता हूं, प्रोग्रामिंग भाषा नहीं)।

बेशक, इस दृष्टिकोण के कुछ नुकसान हैं:

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

टाइपस्क्रिप्ट फ्लो के विकल्प के रूप में

मैंने जावास्क्रिप्ट समुदाय में टाइपस्क्रिप्ट में बढ़ती रुचि को देखा: दोनों ऑनलाइन और इसके चारों ओर डेवलपर्स के बीच। इसलिए, जैसे ही मुझे पता चला कि बाबेल 7 टाइपस्क्रिप्ट का समर्थन करता है, मैंने तुरंत संभावित संक्रमण विकल्पों का अध्ययन करना शुरू कर दिया। इसके अलावा, हमने फ्लो के कुछ नुकसानों का सामना किया:

संपादक / आईडीई एकीकरण की निम्न गुणवत्ता (टाइपस्क्रिप्ट की तुलना में)। सर्वश्रेष्ठ एकीकरण के साथ फेसबुक का अपना IDE Nuclide, पहले से पुराना है।
एक छोटा समुदाय, जिसका अर्थ है कि विभिन्न पुस्तकालयों के लिए कम प्रकार की परिभाषाएँ, और वे निम्न गुणवत्ता के हैं (वर्तमान में निश्चित रूप से रिपोजिटरी में 19 682 गिटहब सितारे हैं, और प्रवाह-टाइप रिपॉजिटरी में केवल 3070 हैं)।
एक सार्वजनिक विकास योजना का अभाव और फ़ेसबुक और समुदाय पर फ़्लो टीम के बीच खराब संपर्क। स्थिति को समझने के लिए आप फेसबुक कर्मचारी की इस टिप्पणी को पढ़ सकते हैं।
उच्च स्मृति खपत और लगातार लीक - हमारे कुछ डेवलपर्स के लिए, फ्लो कभी-कभी लगभग 10 जीबी रैम तक ले जाता है।

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

कोड के 30 हजार से अधिक लाइनों को फ्लो से टाइपस्क्रिप्ट में स्थानांतरित करें

शुरुआत के लिए, आपको 6 से 7. से बाबेल को अपग्रेड करना चाहिए। इस सरल कार्य में 16 मानव-घंटे लगे, क्योंकि हमने उसी समय वेबपैक 3 से 4 को अपग्रेड करने का निर्णय लिया था। हमारे कोड में कुछ अप्रचलित निर्भरताएँ कार्य को जटिल बनाती हैं। जावास्क्रिप्ट परियोजनाओं के विशाल बहुमत में ऐसी समस्याएं नहीं होंगी।

उसके बाद, हमने नए टाइपस्क्रिप्ट प्रीसेट के साथ बैबल फ्लो प्रीसेट को बदल दिया, और फिर पहली बार फ्लो का उपयोग करते हुए लिखे गए हमारे सभी स्रोतों पर टाइपस्क्रिप्ट कंपाइलर को लॉन्च किया। परिणाम 8245 सिंटैक्स त्रुटियां हैं (tsc CLI प्रोजेक्ट के लिए वास्तविक त्रुटियां तब तक नहीं दिखाता है जब तक कि सभी सिंटैक्स त्रुटियां ठीक नहीं हो जाती हैं)।

सबसे पहले, इस संख्या ने हमें (बहुत) भयभीत किया, लेकिन हमें जल्दी से एहसास हुआ कि टाइपस्क्रिप्ट्स .js फ़ाइलों का समर्थन नहीं करने के कारण अधिकांश त्रुटियां थीं। विषय का अध्ययन करने के बाद, मुझे पता चला कि टाइपस्क्रिप्ट फ़ाइलों को .ts या .tsx (यदि उनके पास JSX है) के साथ समाप्त होना चाहिए। यह मुझे एक स्पष्ट असुविधा प्रतीत होती है। JSX की उपस्थिति / अनुपस्थिति के बारे में नहीं सोचने के लिए, मैंने बस सभी फाइलों को .tsx में बदल दिया।

लगभग 4,000 वाक्यविन्यास त्रुटियां रहती हैं। उनमें से अधिकांश प्रकार के आयात से संबंधित हैं, जो टाइपस्क्रिप्ट के साथ बस आयात के साथ प्रतिस्थापित किया जा सकता है, साथ ही वस्तुओं के पदनाम में अंतर ( {||} बजाय {} )। नियमित रूप से एक जोड़े को नियमित रूप से लागू करने से, हमने 414 वाक्यविन्यास त्रुटियों को छोड़ दिया। बाकी सब कुछ मैन्युअल रूप से तय किया जाना था:

अस्तित्वगत प्रकार , जिसे हम एक सामान्य प्रकार के तर्कों को आंशिक रूप से प्राप्त करने के लिए उपयोग करते हैं, को टाइप तर्क को स्पष्ट करने के लिए स्पष्ट तर्क या अज्ञात के साथ प्रतिस्थापित किया जाना चाहिए कि कुछ तर्क महत्वहीन हैं।
प्रकार $ कुंजी और अन्य उन्नत प्रवाह प्रकारों में टाइपस्क्रिप्ट (उदाहरण के लिए, $Shape“” टाइपस्क्रिप्ट में Partial“” से मेल खाती है) में एक अलग वाक्यविन्यास है।

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

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

किस तरह की गलतियां?

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

नोट: टाइपस्क्रिप्ट सैंडबॉक्स के सभी लिंक "सख्त" मापदंडों को मानते हैं। दुर्भाग्य से, जब आप एक लिंक साझा करते हैं, तो ये विकल्प URL में संग्रहीत नहीं होते हैं। इसलिए, उन्हें इस आलेख से सैंडबॉक्स के किसी भी लिंक को खोलने के बाद मैन्युअल रूप से सेट किया जाना चाहिए।

invariant.js

हमारे स्रोत कोड में invariant फ़ंक्शन बहुत सामान्य निकला। बस प्रलेखन उद्धृत करने के लिए:

 var invariant = require('invariant'); invariant(someTruthyVal, 'This will not throw'); // No errors invariant(someFalseyVal, 'This will throw an error with this message'); // Error raised: Invariant Violation: This will throw an error with this message

विचार स्पष्ट है: एक साधारण फ़ंक्शन जो किसी शर्त पर एक त्रुटि फेंकता है। आइए देखें कि इसे फ्लो पर कैसे लागू करें और इसका उपयोग करें :

 type Maybe<T> = T | void; function invariant(condition: boolean, message: string) { if (!condition) { throw new Error(message); } } function f(x: Maybe<number>, c: number) { if (c > 0) { invariant(x !== undefined, "When c is positive, x should never be undefined"); (x + 1); // works because x has been refined to "number" } }

अब टाइपस्क्रिप्ट में समान स्निपेट लोड करें । जैसा कि आप लिंक से देख सकते हैं, टाइपस्क्रिप्ट एक त्रुटि देता है, क्योंकि यह समझ नहीं सकता है कि x अंतिम पंक्ति के बाद undefined नहीं रहने की गारंटी है। यह वास्तव में एक अच्छी तरह से ज्ञात समस्या है - टाइपस्क्रिप्ट (अभी के लिए) यह नहीं जानता कि एक फ़ंक्शन के माध्यम से यह कैसे किया जाए। हालाँकि, यह हमारे कोड बेस में एक बहुत ही सामान्य टेम्प्लेट है, इसलिए मुझे मैन्युअल रूप से प्रत्येक इनवेरिएंट इंस्टेंस (150 से अधिक टुकड़े) को दूसरे कोड से बदलना होगा जो तुरंत एक त्रुटि देता है:

 type Maybe<T> = T | void; function f(x: Maybe<number>, c: number) { if (c > 0) { if (x === undefined) { throw new Error("When c is positive, x should never be undefined"); } (x + 1); // works because x has been refined to "number" } }

वास्तव में तुलनात्मक नहीं invariant , लेकिन ऐसा कोई महत्वपूर्ण मुद्दा नहीं है।

$ ExpectError बनाम @ ts-अनदेखा

फ्लो में @ts-ignore समान एक बहुत ही रोचक फंक्शन है, सिवाय इसके कि यह एक एरर फेंकता है अगर अगली लाइन एरर नहीं है । यह "टाइप टेस्ट" लिखने के लिए बहुत उपयोगी है जो यह सुनिश्चित करता है कि टाइप टाइपिंग (चाहे टाइपस्क्रिप्ट या फ़्लो) कुछ प्रकार की त्रुटियां पाए।

दुर्भाग्य से, टाइपस्क्रिप्ट में ऐसा कोई फ़ंक्शन नहीं है, इसलिए हमारे परीक्षणों ने कुछ मूल्य खो दिया है। मैं टाइपस्क्रिप्ट पर इस फ़ंक्शन को लागू करने के लिए उत्सुक हूं ।

सामान्य प्रकार की त्रुटियां और प्रकार की अनुमान

अक्सर टाइपस्क्रिप्ट फ्लो की तुलना में अधिक स्पष्ट कोड की अनुमति देता है, जैसा कि इस उदाहरण में:

 type Leaf = { host: string; port: number; type: "LEAF"; }; type Aggregator = { host: string; port: number; type: "AGGREGATOR"; } type MemsqlNode = Leaf | Aggregator; function f(leaves: Array<Leaf>, aggregators: Array<Aggregator>): Array<MemsqlNode> { // The next line errors because you cannot concat aggregators to leaves. return leaves.concat(aggregators); }

प्रवाह infers छोड़ देता है ।concat (एग्रीगेटर्स) Array के रूप में टाइप करें <पत्ती | एग्रीगेटर> , जिसे बाद में Array<MemsqlNode> जा सकता है। मुझे लगता है कि यह एक अच्छा उदाहरण है जहां फ्लो थोड़ा होशियार हो सकता है, और टाइपस्क्रिप्ट को थोड़ी मदद की जरूरत है: इस मामले में हम एक प्रकार का जोर लगा सकते हैं, लेकिन यह खतरनाक है और इसे बहुत सावधानी से किया जाना चाहिए।

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

 type Player = { name: string; age: number; position: "STRIKER" | "GOALKEEPER", }; type F = () => Promise<Array<Player>>; const f1: F = () => { return Promise.all([ { name: "David Gomes", age: 23, position: "GOALKEEPER", }, { name: "Cristiano Ronaldo", age: 33, position: "STRIKER", } ]); };

टाइपस्क्रिप्ट आपको इसे लिखने की अनुमति नहीं देगा क्योंकि यह आपको { name: "David Gomes", age: 23, type: "GOALKEEPER" } को ऑब्जेक्ट Player रूप में घोषित करने की अनुमति नहीं देगा (सटीक त्रुटि के लिए सैंडबॉक्स देखें)। यह एक और मामला है जहां मुझे टाइपस्क्रिप्ट बहुत स्मार्ट नहीं लगता (कम से कम फ्लो की तुलना में, जो इस कोड को समझता है)।

इसे ठीक करने के लिए कई विकल्प हैं:

"STRIKER" घोषित करें ताकि टाइपस्क्रिप्ट समझे कि स्ट्रिंग प्रकार का एक वैध संकरण है "STRIKER" | "GOALKEEPER" "STRIKER" | "GOALKEEPER" ।
Player रूप में सभी ऑब्जेक्ट घोषित करें।
या क्या मैं सबसे अच्छा समाधान मानता हूं: Promise.all Promise.all<Player>(...) लिखकर किसी भी प्रकार के बयानों का उपयोग किए बिना टाइपस्क्रिप्ट की मदद करें।

यहां एक और उदाहरण (टाइपस्क्रिप्ट) दिया गया है जहां फ्लो फिर से टाइप इंफ़ेक्शन में बेहतर है :

 type Connection = { id: number }; declare function getConnection(): Connection; function resolveConnection() { return new Promise(resolve => { return resolve(getConnection()); }) } resolveConnection().then(conn => { // TypeScript errors in the next line because it does not understand // that conn is of type Connection. We have to manually annotate // resolveConnection as Promise<Connection>. (conn.id); });

एक बहुत छोटा लेकिन दिलचस्प उदाहरण: फ्लो को Array<T>.pop() टाइप T माना जाता है, और टाइपस्क्रिप्ट इसे T | void मानता है T | void T | void । टाइपस्क्रिप्ट के पक्ष में एक बिंदु, क्योंकि यह आपको एक तत्व के अस्तित्व को दोगुना करने के लिए मजबूर करता है (यदि सरणी खाली है, तो Array.pop undefined देता है)। इस तरह के कई अन्य छोटे उदाहरण हैं जहां टाइपस्क्रिप्ट फ्लो से बेहतर है।

तृतीय-पक्ष निर्भरता के लिए टाइपस्क्रिप्ट परिभाषाएँ

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

Npm से लाइब्रेरीज़ फ्लो या टाइपस्क्रिप्ट टाइप परिभाषाओं के साथ या बिना दोनों के साथ आ सकती हैं। बहुत बार (छोटे) पुस्तकालयों को एक या दूसरे के साथ आपूर्ति नहीं की जाती है, इसलिए आपको अपनी स्वयं की परिभाषा लिखना होगा या समुदाय से उन्हें उधार लेना होगा। फ़्लो और टाइपस्क्रिप्ट दोनों तृतीय-पक्ष जावास्क्रिप्ट पैकेज के लिए मानक परिभाषा रिपॉजिटरी का समर्थन करते हैं: ये प्रवाह-टाइप और निश्चित रूप से टाइप किए गए हैं ।

मुझे कहना होगा कि निश्चित तौर पर हमें बहुत अधिक पसंद आया। फ्लो-टाइप के साथ, मुझे प्रोजेक्ट में विभिन्न निर्भरता के लिए टाइप परिभाषाओं को पेश करने के लिए सीएलआई टूल का उपयोग करना था। निश्चित रूप से Typed npm CL रिपॉजिटरी में @types/package-name भेजकर npm CLI टूल के साथ इस फ़ंक्शन को जोड़ती है। यह बहुत ही शांत है और हमारी निर्भरता के लिए प्रकार परिभाषाओं के इनपुट को सरल करता है (जेस्ट, रिएक्शन, लॉश, रिएक्शन-रिडक्स, ये कुछ ही हैं)।

इसके अलावा, मुझे निश्चित रूप से निश्चित रूप से डेटाबेस को भरने में बहुत अच्छा समय था (यह मत सोचो कि फ्लो से टाइपस्क्रिप्ट के लिए कोड पोर्ट करते समय टाइप परिभाषाएं बराबर हैं)। मैंने पहले ही कुछ पुल अनुरोध भेजे हैं , और कहीं भी कोई समस्या नहीं थी। बस रिपॉजिटरी को क्लोन करें, टाइप परिभाषाएँ संपादित करें, परीक्षण जोड़ें - और एक पुल अनुरोध भेजें। निश्चित रूप से गिफ्टबॉट बॉट आपके द्वारा संपादित परिभाषाओं के लेखकों को चिह्नित करता है। यदि उनमें से कोई भी 7 दिनों के भीतर प्रतिक्रिया प्रदान नहीं करता है, तो अनुरक्षक को विचार के लिए पुल अनुरोध प्रस्तुत किया जाता है। मुख्य शाखा के साथ विलय के बाद, एनपीएम के लिए निर्भरता पैकेज का एक नया संस्करण भेजा जाता है। उदाहरण के लिए, जब मैंने पहली बार @ प्रकार / redux-form पैकेज अपडेट किया था, तो संस्करण 4.४.१४ स्वचालित रूप से npm पर भेजा गया था। इसलिए नई प्रकार की परिभाषाएँ प्राप्त करने के लिए सिर्फ package.json फ़ाइल को अपडेट करें। यदि आप पुल अनुरोध को अपनाने के लिए इंतजार नहीं कर सकते हैं, तो आप हमेशा अपनी परियोजना में उपयोग किए जाने वाले प्रकारों की परिभाषा बदल सकते हैं, जैसा कि पिछले लेखों में से एक में वर्णित है ।

सामान्य तौर पर, बड़े और अधिक समृद्ध टाइपस्क्रिप्ट समुदाय के कारण निश्चित रूप से टाइप किए गए प्रकारों की गुणवत्ता बेहतर होती है। वास्तव में, प्रोजेक्ट को टाइपस्क्रिप्ट में स्थानांतरित करने के बाद , हमारे प्रकार का कवरेज 88% से बढ़कर 96% हो गया , मुख्य रूप से तीसरे पक्ष के निर्भरता प्रकारों की बेहतर परिभाषा के कारण, any प्रकार से कम।

लाइनिंग और परीक्षण

हमने एस्लिंट से tslint पर स्विच किया (टाइपस्क्रिप्ट के लिए एस्लिंट के साथ, इसे शुरू करना कठिन लग रहा था)।
टाइपस्क्रिप्ट परीक्षण ts-jest का उपयोग करते हैं। कुछ परीक्षण टाइप किए गए हैं, जबकि अन्य नहीं हैं (यदि बहुत लंबे समय तक टाइप किया जाता है, तो हम उन्हें .js फ़ाइलों के रूप में सहेजते हैं)।

सभी टाइपिंग त्रुटियों को ठीक करने के बाद क्या हुआ?

40 मानव-घंटे के काम के बाद, हम अंतिम टाइपिंग त्रुटि पर पहुंच गए, इसे @ts-ignore का उपयोग करते हुए कुछ समय के लिए स्थगित कर दिया।

कोड समीक्षा टिप्पणियों की समीक्षा करने और कुछ बग्स को ठीक करने के बाद (दुर्भाग्य से, मुझे तर्क को ठीक करने के लिए रनटाइम कोड को थोड़ा बदलना पड़ा कि टाइपस्क्रिप्ट समझ नहीं सका) पुल अनुरोध चला गया है, और तब से हम टाइपस्क्रिप्ट का उपयोग कर रहे हैं। (और हाँ, हमने तय किया है कि पिछले @ts-ignore अगले पुल अनुरोध में @ts-ignore करें)।

संपादक के साथ एकीकरण के अलावा, टाइपस्क्रिप्ट के साथ काम करना फ्लो के साथ काम करने के समान है। प्रवाह सर्वर का प्रदर्शन थोड़ा अधिक है, लेकिन यह एक बड़ी समस्या नहीं है, क्योंकि वे वर्तमान फ़ाइल के लिए त्रुटियों को समान रूप से जल्दी से उत्पन्न करते हैं। केवल प्रदर्शन अंतर यह है कि टाइपस्क्रिप्ट फ़ाइल को थोड़ी देर बाद सहेजने के बाद (0.5 difference1 सेकेंड) नई त्रुटि की रिपोर्ट करता है। सर्वर स्टार्टअप का समय लगभग (लगभग 2 मिनट) समान है, लेकिन यह इतना महत्वपूर्ण नहीं है। अब तक, हमें मेमोरी की खपत में कोई समस्या नहीं हुई है। ऐसा लगता है कि tsc लगातार 600 MB का उपयोग करता है।

ऐसा प्रतीत हो सकता है कि टाइप इंफ़ेक्शन फ़ंक्शन फ़्लो को एक बड़ा लाभ देता है, लेकिन दो कारण हैं कि यह वास्तव में क्यों मायने नहीं रखता है:

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

कोड आँकड़े

 $ npm run type-coverage # https://github.com/plantain-00/type-coverage 43330 / 45047 96.19% $ cloc # ignoring tests and dependencies -------------------------------------------------------------------------------- Language files blank comment code -------------------------------------------------------------------------------- TypeScript 330 5179 1405 31463

आगे क्या है?

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

मुझे आपके साथ जावास्क्रिप्ट के साथ अपने रोमांच के दौरान सीखी गई सभी चीजों को साझा करने की खुशी है। यदि आप किसी विशिष्ट विषय में रुचि रखते हैं, तो कृपया मुझे बताएं ।

कोड के 30,000 लाइनों को फ्लो से टाइपस्क्रिप्ट में स्थानांतरित करें