Language-tools: مناقشة: كيف يمكننا كتابة الأحداث التي يدعمها المكون

السبب في عدم إمكانية تنفيذ ذلك بسهولة هو أن جمع كل الأحداث الممكنة أصعب بكثير من جمع الدعائم. وهذا أيضًا سبب عدم عمل الإكمال التلقائي لأن هذه مخصصة للدعائم.

بالنظر إلى الغطاء ، يتم تنفيذ الدعائم من خلال دعائم jsx. الأحداث ليست بسبب القيود المفروضة على جمعها. إذا كان المستخدم سيكتبها بشكل صريح ، فيمكن تغيير ذلك. لا يمكننا تحديد الأحداث المرسلة على أنها "لا تتوافق مع التعريف" على الرغم من التحديات المذكورة.

من المحتمل أن يكون وجود واجهة محجوزة هو الطريق إلى الأمام. لقد فكرنا في هذا من قبل في سياق الدعائم العامة. يمكن أن تكون أسماء الواجهة المحجوزة ComponentEvents و ComponentProps و ComponentSlots و ComponentDef لكتابة الثلاثة.

ذات الصلة # 304

يجب أن يتم إجراء الإكمال التلقائي باستخدام on:<event> بشكل مختلف لأننا نستخدم JSX للحصول على عمليات الإكمال التلقائي هذه تحت غطاء المحرك. للحصول على الإكمال التلقائي "خارج الصندوق" ، سنحتاج إلى الحصول على on:<event> كجزء من الدعائم. لكن هذا غير ممكن لأن JSX لا يسمح بأحرف مثل : في الدعائم.
مشكلة أخرى هي أننا سنحتاج بطريقة ما إلى تحويل تعريف نوع الأحداث إلى ما قبل on: ، والذي لا يمكن إجراؤه باستخدام TypeScript في الوقت الحالي ( مشكلة TS ذات الصلة ).

ينشأ حلان من هذه القيود:

• اطلب من المطورين كتابة أحداثهم مثل __on__<eventName>: .. وسنقوم في خادم اللغة باستبدال __on__ بـ on: أثناء الإكمال التلقائي. هذا يبدو دون المستوى الأمثل وهش.
• تنفيذ الإكمال التلقائي الخاص بنا لهذا الغرض. ربما تكون هذه مهمة صعبة ، لكنها ستؤدي إلى حل نظيف.

يمكن بسهولة الحصول على أخطاء " on:XXX غير موجود" بعد دمج # 386 من خلال أحد أشكال تعريف الأسلوب $on لا يتراجع إلى CustomEvent<any> إذا كتب المستخدمون أحداثهم بشكل صريح .

بمجرد إصدار https://github.com/sveltejs/svelte/pull/5260 ، يمكننا محاولة تحديث svelte2tsx بحيث يبحث عن createEventDispatcher ، ويبحث عما إذا كان يحتوي على نوع التعليق التوضيحي ، و إذا كانت الإجابة بنعم ، يستخدم ذلك للحصول على الأنواع المناسبة.

يمكنك الآن الاستفادة من كتابة createEventDispatcher المقدمة في Svelte 3.25.0. اذا فعلت

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

تضمين التغريدة

أي أفكار حول سبب عدم تلقي بعض أحداث الاستماع مقابل 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> .