Language-tools: चर्चा: हम एक घटक द्वारा समर्थित घटनाओं को कैसे टाइप कर सकते हैं

इसे आसानी से लागू नहीं करने का कारण यह है कि सभी संभावित घटनाओं को इकट्ठा करना प्रॉप्स को इकट्ठा करने की तुलना में बहुत कठिन है। यही कारण है कि स्वत: पूर्णता काम नहीं करती क्योंकि ये सहारा के लिए हैं।

हुड के नीचे देखकर यह है कि प्रोप को जेएसएक्स प्रोप के माध्यम से कार्यान्वित किया जाता है। घटनाएँ उन्हें एकत्र करने की सीमाओं के कारण नहीं हैं। यदि उपयोगकर्ता उन्हें स्पष्ट रूप से टाइप करेगा तो इसे बदला जा सकता है। उल्लिखित चुनौतियों के कारण हम प्रेषित घटनाओं को "यह परिभाषा के अनुरूप नहीं है" के रूप में चिह्नित नहीं कर सकते हैं।

एक आरक्षित इंटरफ़ेस होने की संभावना आगे बढ़ने की संभावना है। हमने इस बारे में पहले जेनेरिक प्रॉप्स के संदर्भ में सोचा है। तीनों टाइप करने के लिए आरक्षित इंटरफ़ेस नाम ComponentEvents , ComponentProps , ComponentSlots और ComponentDef ।

संबंधित #304

on:<event> साथ स्वत: पूर्णता प्राप्त करना अलग तरीके से किया जाना चाहिए क्योंकि हुड के तहत हम इन स्वत: पूर्णताओं को प्राप्त करने के लिए JSX का उपयोग करते हैं। स्वत: पूर्णता "बॉक्स से बाहर" प्राप्त करने के लिए, हमें सहारा के हिस्से के रूप में on:<event> आवश्यकता होगी। लेकिन यह संभव नहीं है क्योंकि JSX प्रॉप्स में : जैसे वर्णों की अनुमति नहीं देता है।
एक और समस्या यह है कि हमें किसी भी तरह on: को प्रीपेन्ड करने के लिए ईवेंट प्रकार की परिभाषा को परिवर्तित करने की आवश्यकता होगी, जो इस समय टाइपस्क्रिप्ट के साथ नहीं किया जा सकता है ( संबंधित टीएस समस्या )।

इन बाधाओं से दो समाधान निकलते हैं:

• देवों से कहें कि वे अपने ईवेंट जैसे __on__<eventName>: .. टाइप करें और हम भाषा सर्वर में स्वतः पूर्ण होने के दौरान __on__ को on: बदल देंगे। यह उप-इष्टतम और भंगुर लगता है।
• इसके लिए हमारी "स्वयं" स्वत: पूर्णता लागू करें। यह संभवतः एक कठिन कार्य है, लेकिन यह एक स्वच्छ समाधान की ओर ले जाएगा।

" on:XXX मौजूद नहीं है" प्राप्त करना #386 को $on विधि परिभाषा की भिन्नता के माध्यम से विलय करने के बाद आसानी से संभव है यदि उपयोगकर्ता अपनी घटनाओं को स्पष्ट रूप से टाइप करते हैं तो CustomEvent<any> वापस नहीं आते हैं .

एक बार https://github.com/sveltejs/svelte/pull/5260 जारी होने के बाद हम svelte2tsx को अपडेट करने का प्रयास कर सकते हैं ताकि यह createEventDispatcher , ऐसा लगता है कि इसमें एक प्रकार का एनोटेशन है, और यदि हां, तो इसका उपयोग उचित प्रकार प्राप्त करने के लिए करता है।

अब आप Svelte 3.25.0 में पेश किए गए createEventDispatcher टाइपिंग का लाभ उठा सकते हैं। यदि तुम करो

const dispatch = createEventDispatcher<{foo: string; bar: boolean}>();

आपको घटक के भीतर dispatch के लिए मजबूत टाइपिंग मिलती है, और यदि आप foo / bar ईवेंट सुनते हैं, तो आपको मजबूत टाइपिंग मिलेगी:

on:foo={e => ... // <- e is of type CustomEvent<string>

अब आपको ईवेंट के लिए बेहतर स्वतः पूर्णता भी प्राप्त होगी। ध्यान दें कि आपको अभी भी अन्य घटनाओं को सुनने की अनुमति है, इसलिए "केवल createEventDispatcher माध्यम से परिभाषित घटनाओं को सुनें" के अर्थ में सुरक्षा टाइप करना अभी भी ComponentEvents इंटरफ़ेस के माध्यम से ही संभव है। लेकिन हम कुछ (शायद एक स्क्रिप्ट टैग विशेषता) प्रदान करने की योजना बना रहे हैं जो घटनाओं को सख्त बना देगा।

संबंधित दस्तावेज़: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#typing -component-events

@dummdidumm

createEventDispatcher लिए कुछ सुनने की घटनाओं पर कोई विचार क्यों प्रकार प्राप्त नहीं होता है?

उदाहरण:

// Component Foo
const dispatchFoo = createEventDispatcher<{foo: string; bar: boolean}>();
const dispatchBar = createEventDispatcher<{bar: string; baz: string}>();

// Component Bar
// e is CustomEvent<any>
on:foo="{(e) => handleFoo(e.detail.bar)}"
// e is CustomEvent<{baz: string}>
on:bar="{(e) => handleBar(e.detail.bar)}"

टाइपप्रति संकलक उम्मीद के मुताबिक इसे पकड़ लेता है।

क्रम बदलने से अलग-अलग परिणाम मिलते हैं।

यदि createEventDispatcher ऑर्डर बदलता है, तो टाइपस्क्रिप्ट कंपाइलर त्रुटि नहीं पकड़ता है।
ऐसा प्रतीत होता है कि केवल अंतिम createEventDispatcher श्रोता के लिए प्रकार उत्पन्न करता है।

// Component Foo
const dispatchBar = createEventDispatcher<{bar: string; baz: string}>();
const dispatchFoo = createEventDispatcher<{foo: string; bar: boolean}>();

// Component Bar
// e is CustomEvent<{bar: boolean}>
on:foo="{(e) => handleFoo(e.detail.bar)}"
// e is CustomEvent<any>
on:bar="{(e) => handleBar(e.detail.bar)}"

टाइपस्क्रिप्ट कंपाइलर त्रुटि नहीं पकड़ता है क्योंकि प्रकार अब CustomEvent<any> ।