Language-tools: ネイティブDOM要素でカスタムイベントをサポートする

作成日 2020年08月05日  ·  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)

カスタムイベントは、Sveltesアクション/使用ディレクティブhttps：//svelte.dev/examples#actionsを使用してdiv要素にディスパッチされます。

希望するソリューションを説明してください
ネイティブ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
ソース
picture johanbissemattsson

最も参考になるコメント

アクションを持つ要素にのみ適用されるようにする方法があるかどうかはわかりません。 しかし、このようにグローバルに利用できるようにすることができます。

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}
picture jasonlyu123 2020年08月06日
👍3

全てのコメント4件

アクションを持つ要素にのみ適用されるようにする方法があるかどうかはわかりません。 しかし、このようにグローバルに利用できるようにすることができます。

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}
jasonlyu123 picture jasonlyu123 2020年08月06日
👍3

「 CustomEvent<any>にフォールバックする」でタイピングを強化することもできますが、他の人がイベントをタイプミスした場合に「存在しない」エラーをスローするためにタイピングに依存する可能性があるため、これは行いません。アクションを持つ要素にのみ適用される場合は、そのようなもので問題ありませんが、それをどのように実装するかはわかりません。
アクションからタイプを推測することは、ほとんど不可能な作業だと思います。 たぶん、ユーザーがアクションとその可能なイベントを明示的に入力できるようにする方法を見つけることができます。

dummdidumm picture dummdidumm 2020年08月06日

おかげで、ユーザーにアクションを明示的に入力させるか、 CustomEvent<any>にフォールバックするタイミングを明示的に選択させるのがおそらく最良のシナリオですが、 @jasonlyu123による解決策で十分です。 素晴らしい仕事をありがとう！

johanbissemattsson picture johanbissemattsson 2020年08月06日
👍1

私はこれをもう一度見ました、そして今、私は前進するための最良の方法に分かれています。

オプション1：無音エラー

use:YYディレクティブを使用したDOM要素のon:XXイベントの場合、エラーを沈黙させることができます。 欠点は、イベントが暗黙的に任意のタイプであるということです。 また、Svelteは本質的に非常に動的であるため、誰かがCustomEventsをバブリングする可能性があるため、すべてのケースをキャッチできるとは限りません。

オプション2： CustomEvent<any>フォールバックを追加する

基本的に、すべての本質的な要素の型指定に& {[key: string]: CustomEvent<any>}を追加します。 これは、上記にリストされていない_any_属性がCustomEvent<any>にフォールバックすることを意味します。 これにより、オプション1の「動的な性質」の問題と「暗黙の任意の」問題が修正されます。ただし、誰かがmyownAttributeなどのカスタム属性を使用する場合も間違っています。

オプション3： anyフォールバックを追加する

オプション2と同様に、 & {[key: string]: any}フォールバックを追加するだけです。 これは、適合しないものはすべてにフォールバックすることを意味します。 これは、タイプミスを検出しなくなるという犠牲を払って、DOMの動的な性質に最もよく適合します。

dummdidumm picture dummdidumm 2020年10月02日
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

non25 picture non25  ·  5コメント
PatrickG picture PatrickG  ·  3コメント
opensas picture opensas  ·  4コメント
maximedupre picture maximedupre  ·  5コメント
matthewmueller picture matthewmueller  ·  3コメント