मान लें कि मेरे पास निम्नलिखित के रूप में एक HTML तत्व है:

<progress value="1" max="10" id="site_progress"></progress>

VSCode एक समस्या दिखाता है ('संपत्ति "अधिकतम" प्रकार "तत्व" पर मौजूद नहीं है), अगर मैं इस तरह से इस तत्व का चयन करता हूं:

const progress = document.querySelector('#site_progress');
progress.max = 9;

कोई समस्या नहीं होगी, अगर मैं तत्व चयनकर्ता के माध्यम से चयन करता हूं:

const progress = document.querySelector('progress');
progress.max = 9;

क्या मैं इस तरह के व्यवहार से बचने के लिए टाइप अभिकथन जैसा कुछ कर सकता हूं या नियमित जावास्क्रिप्ट में इस समस्या को संभालने के लिए अच्छे अभ्यास क्या हैं?

2
FelHa 1 अक्टूबर 2020, 11:42

1 उत्तर

सबसे बढ़िया उत्तर

व्यक्तिगत रूप से मैं सिर्फ टीएस में जाऊंगा, लेकिन फिर भी आपको कास्ट करने की आवश्यकता होगी। JS में टाइप करने के लिए आप कर सकते हैं ->

/** @type HTMLProgressElement */
const progress = document.querySelector('#id');
progress.max = 9;

टाइपप्रति में यह इस तरह होता ->

const progress = document.querySelector('#id') as HTMLProgressElement;
progress.max = 9;

एक और अच्छी सुविधा, आप टाइप गार्ड बना सकते हैं, और इससे कंपाइलर को भी मदद मिलती है।

उदाहरण के लिए, यह नीचे TS और JS दोनों में काम करेगा।

const progress = document.querySelector('#id');
if (progress instanceof HTMLProgressElement)
    progress.max = 9;

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

जैसे..

const progress = document.querySelector('#id');
if (!(progress instanceof HTMLProgressElement))
  throw new Error('#id not a progress');
progress.max = 9;
4
Keith 1 अक्टूबर 2020, 12:15