Language-tools: Поддержка пользовательских событий для собственных элементов DOM.

Созданный на 5 авг. 2020 · 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 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: ошибка тишины

Мы могли бы отключить ошибку, если это событие on:XX в элементе DOM с директивой use:YY . Недостатком является то, что событие неявно относится к типу any. Он также может не охватывать все случаи, потому что Svelte настолько динамичен по своей природе, что кто-то может создавать всплывающие CustomEvents.

Вариант 2. Добавьте резервную копию `CustomEvent<any>`

По сути, мы бы добавили & {[key: string]: CustomEvent<any>} ко всем внутренним типам элементов. Это означает, что _любой_ атрибут, не указанный выше, будет возвращен к CustomEvent<any> . Это решит проблему «динамического характера» и проблему «неявного любого» варианта 1. Но это также неправильно в случаях, когда кто-то использует настраиваемый атрибут, такой как myownAttribute .

Вариант 3. Добавьте резервную копию `any`

Аналогично варианту 2, только мы добавляем запасной вариант & {[key: string]: any} . Это означает, что все, что не подходит, возвращается к любому. Это лучше всего соответствует динамической природе DOM за счет того, что больше не удается обнаружить опечатки.

dummdidumm 2 окт. 2020

Была ли эта страница полезной?

0 / 5 - 0 рейтинги