Language-tools: دعم الأحداث المخصصة على عناصر DOM الأصلية

تم إنشاؤها على ٥ أغسطس ٢٠٢٠ · 4تعليقات · مصدر: sveltejs/language-tools

هل طلب الميزة الخاص بك متعلق بمشكلة؟
أتلقى الخطأ التالي عندما أحاول إضافة أحداث مخصصة على عناصر DOM الأصلية:

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).

صِف الحل الذي تريده
كن قادرًا على كتابة التحقق من الأحداث المخصصة المرسلة باستخدام إجراءات Svelte على عناصر DOM الأصلية.

صِف البدائل التي فكرت فيها
يمكنني محاولة تحويل 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 في ٦ أغسطس ٢٠٢٠

👍3

ال 4 كومينتر

لا أعرف ما إذا كانت هناك طريقة لجعلها تنطبق فقط على العناصر ذات الإجراء. ولكن يمكنك إتاحته عالميًا مثل هذا.

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

jasonlyu123 في ٦ أغسطس ٢٠٢٠

👍3

يمكننا أيضًا تحسين كتاباتنا من خلال "الرجوع إلى CustomEvent<any> ولكني أفضل عدم القيام بذلك لأن الآخرين قد يعتمدون على الكتابة لإلقاء خطأ" غير موجود "إذا أخطأوا في كتابة حدث. حسنًا بشيء من هذا القبيل إذا تم تطبيقه فقط على العناصر ذات الإجراءات ، لكنني لست متأكدًا من كيفية تنفيذ ذلك.
أعتقد أن استنتاج النوع من الإجراء هو مهمة شبه مستحيلة. ربما يمكننا إيجاد طريقة للسماح للمستخدم بكتابة الإجراء وأحداثه المحتملة صراحة.

dummdidumm في ٦ أغسطس ٢٠٢٠

شكرًا ، السماح للمستخدم بكتابة الإجراء صراحة أو اختيار الوقت المناسب للعودة إلى CustomEvent<any> ربما يكون أفضل سيناريو للحالة ، لكن الحل بواسطة @ jasonlyu123 جيد بما يكفي بالنسبة لي الآن. شكرا على العمل العظيم!

johanbissemattsson في ٦ أغسطس ٢٠٢٠

👍1

ألقيت نظرة على هذا مرة أخرى والآن أنا منقسمة بشأن أفضل طريقة للمضي قدمًا.

الخيار 1: خطأ الصمت

يمكننا إسكات الخطأ إذا كان حدثًا on:XX على عنصر DOM بتوجيه use:YY . العيب هو أن الحدث من أي نوع ضمنيًا. كما أنه قد لا يلتقط جميع الحالات ، لأن Svelte ديناميكي للغاية بطبيعته ، يمكن لأي شخص القيام بفقاعات CustomEvents.

الخيار 2: إضافة `CustomEvent<any>` احتياطيًا

سنضيف بشكل أساسي & {[key: string]: CustomEvent<any>} إلى جميع كتابات العناصر الداخلية. هذا يعني أن أي سمة غير مذكورة أعلاه سترجع إلى CustomEvent<any> . سيؤدي هذا إلى إصلاح مشكلة "الطبيعة الديناميكية" ومشكلة "أي ضمني" للخيار 1. ولكنه أيضًا خطأ في الحالات التي يستخدم فيها شخص ما سمة مخصصة مثل myownAttribute .

الخيار 3: إضافة `any` احتياطيًا

مثل الخيار 2 ، فقط نقوم بإضافة & {[key: string]: any} احتياطيًا. هذا يعني أن أي شيء لا يصلح يعود إلى أي شيء. هذا يناسب الطبيعة الديناميكية لـ DOM بشكل أفضل على حساب عدم اكتشاف الأخطاء المطبعية بعد الآن.

dummdidumm في ٢ أكتوبر ٢٠٢٠

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات