Language-tools: मूल DOM तत्वों पर कस्टम ईवेंट का समर्थन करें

को निर्मित 5 अग॰ 2020 · 4टिप्पणियाँ · स्रोत: sveltejs/language-tools

क्या आपका फीचर अनुरोध किसी समस्या से संबंधित है?
जब मैं मूल डोम तत्वों पर कस्टम ईवेंट जोड़ने का प्रयास कर रहा हूं तो मुझे निम्न त्रुटि मिलती है:

Type '{ onswipestart: (event: CustomEvent<any>) => void; onswipemove: (event: CustomEvent<any>) => void; onswipeend: (event: CustomEvent<any>) => void; style: string; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'onswipestart' does not exist on type 'HTMLProps<HTMLDivElement>'.ts(2322)

कस्टम ईवेंट को div तत्व में Sveltes क्रिया/उपयोग निर्देश https://svelte.dev/examples#actions) का उपयोग करके भेजा जाता है।

आप जो समाधान चाहते हैं उसका वर्णन करें
मूल DOM तत्वों पर Svelte क्रियाओं का उपयोग करके भेजे गए कस्टम ईवेंट के लिए चेक टाइप करने में सक्षम हों।

उन विकल्पों का वर्णन करें जिन पर आपने विचार किया है
मैं div को एक व्यक्तिगत Svelte घटक में बदलने की कोशिश कर सकता था लेकिन अधिमानतः इसे मूल DOM तत्वों पर भी काम करना चाहिए।

अतिरिक्त संदर्भ

The error message

इस प्रकार मैं कस्टम घटनाओं को सुनता हूं:

<div
  class="bottomSheet"
  class:draggable
  bind:this={bottomSheet}
  use:swipeable
  on:swipestart={handleSwipeStart}
  on:swipemove={handleSwipeMove}
  on:swipeend={handleSwipeEnd}
  style="height:{height};bottom:{bottom};transform:translateY({$coords.ty}px);"
>

Svelte घटकों पर कस्टम ईवेंट के लिए संबंधित पुल अनुरोध: https://github.com/sveltejs/language-tools/pull/303

enhancement

स्रोत

johanbissemattsson

सबसे उपयोगी टिप्पणी

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

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}

jasonlyu123 6 अग॰ 2020

👍3

सभी 4 टिप्पणियाँ

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}

jasonlyu123 6 अग॰ 2020

👍3

हम "फॉल बैक टू CustomEvent<any> के साथ अपनी टाइपिंग को भी बढ़ा सकते हैं, लेकिन मैं ऐसा नहीं करूंगा क्योंकि अन्य लोग टाइपिंग पर भरोसा कर सकते हैं यदि वे किसी ईवेंट को गलत टाइप करते हैं तो "अस्तित्व में नहीं है" त्रुटि। ऐसा कुछ ठीक है अगर यह केवल क्रियाओं वाले तत्वों पर लागू होता है, लेकिन मुझे यकीन नहीं है कि हम इसे कैसे कार्यान्वित करेंगे।
मुझे लगता है कि कार्रवाई से प्रकार का अनुमान लगाना लगभग असंभव कार्य है। हो सकता है कि हम उपयोगकर्ता को स्पष्ट रूप से कार्रवाई और इसकी संभावित घटनाओं को टाइप करने का एक तरीका ढूंढ सकें।

dummdidumm 6 अग॰ 2020

धन्यवाद, उपयोगकर्ता को स्पष्ट रूप से कार्रवाई टाइप करने देना या स्पष्ट रूप से यह चुनना कि CustomEvent<any> पर वापस कब आना है, शायद सबसे अच्छा मामला होगा लेकिन @ jasonlyu123 द्वारा समाधान अब मेरे लिए काफी अच्छा है। बहुत अच्छा कार्य करने के लिए धन्यवाद!

johanbissemattsson 6 अग॰ 2020

👍1

मैंने इसे फिर से देखा और अब मैं इस बात पर विभाजित हूं कि आगे बढ़ने का सबसे अच्छा तरीका क्या है।

विकल्प 1: मौन त्रुटि

यदि यह use:YY निर्देश के साथ DOM तत्व पर on:XX घटना है तो हम त्रुटि को शांत कर सकते हैं। दोष यह है कि घटना किसी भी प्रकार की होती है। यह सभी मामलों को भी नहीं पकड़ सकता है, क्योंकि स्वेल्ट अपनी प्रकृति में इतना गतिशील है, कोई कस्टमइवेंट्स बुदबुदा सकता है।

विकल्प 2: `CustomEvent<any>` फ़ॉलबैक जोड़ें

हम अनिवार्य रूप से सभी आंतरिक तत्व टाइपिंग में & {[key: string]: CustomEvent<any>} जोड़ देंगे। इसका अर्थ यह है कि _any_ विशेषता जो ऊपर सूचीबद्ध नहीं है, वह वापस CustomEvent<any> पर आ जाएगी। यह "गतिशील प्रकृति" समस्या और विकल्प 1 की "अंतर्निहित कोई भी" समस्या को ठीक कर देगा। लेकिन यह उन मामलों में भी गलत है जब कोई व्यक्ति myownAttribute जैसी कस्टम विशेषता का उपयोग करता है।

विकल्प 3: `any` फ़ॉलबैक जोड़ें

विकल्प 2 की तरह, केवल हम & {[key: string]: any} फ़ॉलबैक जोड़ते हैं। इसका मतलब है कि जो कुछ भी फिट नहीं होता वह किसी के पास वापस आ जाता है। यह अब टाइपो को न पकड़ने की कीमत पर डीओएम की गतिशील प्रकृति को सर्वोत्तम रूप से फिट करता है।

dummdidumm 2 अक्तू॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Language-tools: मूल DOM तत्वों पर कस्टम ईवेंट का समर्थन करें

सबसे उपयोगी टिप्पणी

सभी 4 टिप्पणियाँ

विकल्प 1: मौन त्रुटि

विकल्प 2: CustomEvent<any> फ़ॉलबैक जोड़ें

विकल्प 3: any फ़ॉलबैक जोड़ें

संबंधित मुद्दों

विकल्प 2: `CustomEvent<any>` फ़ॉलबैक जोड़ें

विकल्प 3: `any` फ़ॉलबैक जोड़ें