इस पोस्ट श्रृंखला के पिछले भाग में, हमने सुरक्षित अशक्तता के बारे में चर्चा की थी।

अब हम टाइपस्क्रिप्ट डिफ़ॉल्ट व्यवहार की तीसरी और आखिरी समस्या को समझाएंगे और हल करेंगे: डायनामिक टाइपिंग के अवशेष।

हम कवर करेंगे:

• गतिशील टाइपिंग के अवशेष
• वास्तविक समानता जांच
• शर्तों में कोई अंतर्निहित रूपांतरण नहीं
• शर्तें आशुलिपि संकेतन
• कोई तार और संख्या मिश्रण नहीं

गतिशील टाइपिंग के अवशेष

टाइपस्क्रिप्ट को जावास्क्रिप्ट के विपरीत एक "स्टेटिक टाइप चेकर" माना जाता है, जिसमें टाइपिंग गहन रूप से गतिशील होती है।

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

तो समस्या यह है: जावास्क्रिप्ट डायनेमिक टाइपिंग सिस्टम के कुछ हिस्से टाइपस्क्रिप्ट में रहते हैं। इस प्रकार हम यह समझाने जा रहे हैं कि पूर्ण स्थैतिक टाइपिंग प्राप्त करने के लिए इन शेष व्यवहारों को कैसे दबाया जाए।

वास्तविक समानता की जाँच

• ESlint: eqeqeq
• बायोम: संदिग्ध.noDoubleEquals (अनुशंसित में)

समस्या का सबसे अच्छा उदाहरण समानता जांच है। जावास्क्रिप्ट में, == वास्तव में एक समानता जाँच नहीं है, बल्कि एक समतुल्य जाँच है:

1 == "1"; // true

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

ये तुल्यता जांच केवल जावास्क्रिप्ट जैसी गतिशील रूप से टाइप की गई भाषा में समझ में आती है। जिस क्षण से हम टाइपस्क्रिप्ट में काम करने का निर्णय लेते हैं, केवल वास्तविक समानता जांच (प्रकार और मूल्य) का उपयोग किया जाना चाहिए।

1 === "1"; // false

eqeqeq lint नियम इसे लागू करता है।

जावा, सी# या रस्ट जैसी भाषाओं से आने वाले लोगों को इस समस्या से विशेष रूप से सावधान रहना चाहिए, क्योंकि जावास्क्रिप्ट या टाइपस्क्रिप्ट में == का मतलब इन भाषाओं के समान नहीं है। जावास्क्रिप्ट और टाइपस्क्रिप्ट में, समान व्यवहार प्राप्त करने के लिए एक तिहाई = की आवश्यकता होती है।

शर्तों में कोई अंतर्निहित रूपांतरण नहीं

• ESlint: @typescript-eslint/strict-boolean-expressions
• बायोम: गायब नियम

सोचिए स्थितियां अब सुरक्षित हैं? दुर्भाग्य से नहीं, क्योंकि रूपांतरण अंतर्निहित हो सकते हैं:

let tax: number | undefined = 0;

if (tax) {
  console.log("Process payment");
}
if (!tax) {
  throw new Error();
}

उपरोक्त उदाहरण इसके बराबर है:

let tax: number | undefined = 0;

if (tax == true) {
  console.log("Process payment");
}
if (tax == false) {
  throw new Error();
}

जैसा कि आप देख सकते हैं, अंतर्निहित == थे, इसलिए रूपांतरण अभी भी होते हैं: 0 सत्य के बराबर नहीं है, यह गलत के बराबर है। इसलिए कर के वैध मूल्य होने के बावजूद इसमें त्रुटि होगी।

सख्त-बूलियन-एक्सप्रेशन लिंट नियम ऐसी अंतर्निहित शर्तों की अनुमति नहीं देता है, और वास्तविक जांच लागू करता है:

let tax: number | undefined = 0;

if (tax !== undefined) {
  console.log("Process payment");
}
if (tax === undefined) {
  throw new Error();
}

यह जावास्क्रिप्ट में त्वरित स्थितियों के आदी लोगों के लिए पालन करने के लिए सबसे कठिन नियमों में से एक हो सकता है, लेकिन इसे परिप्रेक्ष्य में रखने के लिए, यह जावा, सी# या रस्ट जैसी अन्य भाषाओं में काम करने का सामान्य तरीका है।

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

अनुमत एकमात्र अपवाद वस्तुओं और सरणियों के लिए है: ये मामले सुरक्षित हैं क्योंकि स्ट्रिंग्स और संख्याओं के विपरीत, उनमें गलत मान नहीं हैं। तो निम्नलिखित अभी भी ठीक है:

let movie: Movie | undefined;
if (movie) {}
if (!movie) {}

ध्यान दें: स्विच स्टेटमेंट पहले से ही सुरक्षित हैं क्योंकि वे आंतरिक रूप से === का उपयोग करते हैं।

शर्तें आशुलिपि संकेतन

• ESlint: @typescript-eslint/prefer-nullish-coalescing (स्टाइलिस्टिक-टाइप-चेक्ड में)
• बायोम: गायब नियम

सख्त-बूलियन-एक्सप्रेशन लिंट नियम इस बात का ध्यान रखता है कि स्थितियों की जांच सुरक्षित प्रकार की हो, लेकिन if के अलावा अन्य शर्तों के सिंटैक्स भी हैं:

const movieRating = userRating || 5;

// Which is a shorter version of:
const movieRating = userRating == true ? userRating : 5;

यदि उपयोगकर्ता ने 0 रेटिंग दी है, तो 0 गलत के बराबर है, इसलिए रेटिंग 0 के बजाय 5 होगी।

आधुनिक जावास्क्रिप्ट से इससे बचा जा सकता है:

const movieRating = userRating ?? 5;

// Which is a shorter version of:
const movieRating = userRating !== undefined && userRating !== null
  ? userRating
  : 5;

इसे प्रेफ़र-नुलिश-कोलेसिंग लिंट नियम द्वारा लागू किया जा सकता है।

ध्यान दें कि ?? हर जगह उपयोग नहीं किया जाना चाहिए: || बूलियन के साथ काम करते समय यह अभी भी प्रासंगिक है।

कोई तार और संख्या मिश्रण नहीं

• ESlint:
  • पसंद-टेम्पलेट
  • @टाइपस्क्रिप्ट-एसलिंट/प्रतिबंध-प्लस-ऑपरेंड (अनुशंसित-प्रकार-जांच में)
  • @typescript-eslint/restrict-template-expressions (अनुशंसित-प्रकार-जांच में)
• बायोम:
  • style.useTemplate (अनुशंसित में)
  • अन्य नियम गायब हैं

जावास्क्रिप्ट में, ऑपरेटर का उपयोग संख्याओं के गणितीय जोड़, या स्ट्रिंग संयोजन दोनों के लिए किया जा सकता है। इससे त्रुटि होती है।

"There is "   3   1   "Matrix movies"; // 31
"There is "   (3   1)   "Matrix movies"; // 4

ऑपरेटर को गणितीय जोड़ के लिए आरक्षित किया जाना चाहिए। या कम से कम, इसका उपयोग केवल उसी प्रकार के डेटा के साथ किया जाना चाहिए, जिसे प्रतिबंधित-प्लस-ऑपरेंड लिंट नियम लागू करता है।

आधुनिक जावास्क्रिप्ट से टेम्पलेट स्ट्रिंग्स का उपयोग स्ट्रिंग संयोजन के लिए किया जाना चाहिए, जिसे प्रेफर-टेम्पलेट लिंट नियम लागू करता है:

const movie = `Everything everywhere all at once`;
`${movie} is the best movie!`;

इसके विपरीत, टेम्प्लेट स्ट्रिंग्स में केवल स्ट्रिंग्स का उपयोग किया जाना चाहिए, जिसे प्रतिबंधित-टेम्पलेट-एक्सप्रेशन लिंट नियम लागू करता है।

यदि मिश्रण प्रकार वास्तव में वांछित है, तो रूपांतरण स्पष्ट होना चाहिए:

const total = 3;
`There is ${total.toFixed()} Matrix movies`;

ध्यान दें कि टेम्पलेट स्ट्रिंग्स को नेस्ट किया जा सकता है:

const total = 3;
`There is ${total.toFixed()} Matrix movie${total > 1 ? "s" : ""}`;

निष्कर्ष

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

आप मुझसे संपर्क करना चाहते हैं? निर्देश सारांश में उपलब्ध हैं।