Typescript: lib.d.tsのむベントむンタヌフェむスでcurrentTargetを倉曎するリク゚スト

䜜成日 2014幎07月29日  Â·  36コメント  Â·  ゜ヌス: microsoft/TypeScript

lib.d.tsからEventむンタヌフェヌスを䜿甚し、リスナヌをアタッチするず、コヌルバックはEventタむプのオブゞェクトを取埗したす。 ただし、むベントのcurrentTargetプロパティはEventTargetタむプですElement / HTMLElementタむプである必芁がありたす。

lib.d.ts Suggestion help wanted

最も参考になるコメント

JS FileReader onloadでこのTS2339: Property 'result' does not exist on type 'EventTarget'に遭遇し、FileReaderのonerror枡されたむベントでgetSummary()に察する別の譊告が発生したした。

私の回避策は、恐ろしい赀い波線を抑制するこずです;-)は次のずおりです。

interface FileReaderEventTarget extends EventTarget {
    result:string
}

interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;
    getMessage():string;
}

次に、私のアプリで

reader.onload = function(fre:FileReaderEvent) {
        var data = JSON.parse(fre.target.result);
        ...
    }

生成されたJSコヌドは芋栄えがよく、私にずっおは機胜したす。 異垞なJSむベントタむプのこの皮の゜リュヌションをlib.d.tsに远加できたすか

私の解決策は過床に単玔化されおいるず思いたす。 しかし、その理由を知るこずは助けになるでしょう。

党おのコメント36件

XMLHttpRequestオブゞェクトもcurrentTargetにするこずができたすが、Element / HTMLElementではありたせん。 倚分それがこの背埌にある理由です。 ゞェネリック型はこれを改善したすか

interface Event<T extends EventTarget> {
    /* ... */
    currentTarget: T;
    /* ... */
}

interface EventListener<T extends EventTarget> {
    (evt: Event<T>): void;
}

interface HTMLElement {
    /* ... */
    addEventListener(type: string, listener: EventListener<HTMLElement>, useCapture?: boolean): void;
}

それはそれを改善するのに倧いに圹立぀ように芋えたす。

私のiPhoneから送信された

2014幎8月3日には、午埌01時34分で、SaschaNaz [email protected]曞きたした

XMLHttpRequestオブゞェクトもcurrentTargetにするこずができたすが、Element / HTMLElementではありたせん。 倚分それがこの背埌にある理由です。 ゞェネリック型はこれを改善したすか

むンタヌフェむスむベント{{
/ * ... _ /
currentTargetT;
/ _ ... * /
}

むンタヌフェむスEventListener{{
evtむベント無効;
}

むンタヌフェむスHTMLElement {
/ * ... * /
addEventListenerタむプ文字列、リスナヌEventListener、useCaptureブヌル倀void;
}
—
このメヌルに盎接返信するか、GitHubで衚瀺しおください。

すべおのむベントタヌゲットがElement http://www.w3.org/TR/DOM-Level-3-Events/#event-typesであるずは限らないため、ここでの解決策はさらに倚くする必芁があるこずに泚意しおください。 @SaschaNazの提案に沿っお。

問題は、珟時点では公開できないファむルに基づいお、スクリプトを䜿甚しおlib.d.tsを珟圚生成しおおり、そのファむルは非掚奚になり、新しいファむルが優先されるこずです。 そのため、珟時点ではスクリプトを改善する予定はありたせんが、将来的にはlib.d.ts生成スクリプト/入力でPRを実行できるようになるこずを願っおいたす。

今のずころ「Revisit」にタグを付けたす。1か月以内にこれに぀いおpingしおください。そうすれば、珟圚の堎所を確認できたす。

珟圚のタむプを参照する構文はありたすか この皮の䜜業を行うこずができれば、これはより簡単に解決できるず思いたす。

interface HTMLElement {
    addEventListener(type: string, listener: EventListener<this>, useCapture?: boolean): void;
}

var image: HTMLImageElement;
var video: HTMLVideoElement;
image.addEventListener // receives EventListener<HTMLImageElement> type
video.addEventListener // receives EventListener<HTMLVideoElement> type

その機胜は存圚したせん、それは285ず229で提案されたものに䌌たものです

みなさん、こんにちは。このスレッドにpingを送信したす。 Event.targetこの問題が発生したした。 ほずんどの堎合、タヌゲットはHTMLElementだず思いたす。 デフォルトのタむプがそうではないず想定するのは少し奇劙です。 @SaschaNazの提案を詊しおみた。TypeScriptは

線集これは譊告を静めるために働いた (<HTMLElement>event.target).tagName

@rayshanの提案は、 lib.d.tsファむルに䜕を入れるべきかに぀いおであり、ファむルはInternetExplorerの実装に盎接基づいお自動生成されたす。 したがっお、発生した゚ラヌは正確です。 今のずころ、それを回避する唯䞀の方法は、組み蟌みのlib --noLib なしでビルドしお回避策を䜿甚するか、タヌゲットをキャストするために行ったこずを実行するこずです。 珟圚、TypeScriptでDOMの戻り倀の型を凊理するには、いく぀かの課題がありたす䞻に、DOMが最も䞀貫性のある/構造化された/型安党性のある/䞀貫しお実装されたAPIのセットではないため。

4910が統合されたので、これを再怜蚎できたすか

@zhengbliは、スクリプトベヌスの生成を必芁ずするlib.d.tsの問題のステヌタスに関するコンテキストを持っおいる可胜性がありたす

PRは歓迎したした。 lib.d.tsの倉曎に貢献するための情報は次のずおりです https 

JS FileReader onloadでこのTS2339: Property 'result' does not exist on type 'EventTarget'に遭遇し、FileReaderのonerror枡されたむベントでgetSummary()に察する別の譊告が発生したした。

私の回避策は、恐ろしい赀い波線を抑制するこずです;-)は次のずおりです。

interface FileReaderEventTarget extends EventTarget {
    result:string
}

interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;
    getMessage():string;
}

次に、私のアプリで

reader.onload = function(fre:FileReaderEvent) {
        var data = JSON.parse(fre.target.result);
        ...
    }

生成されたJSコヌドは芋栄えがよく、私にずっおは機胜したす。 異垞なJSむベントタむプのこの皮の゜リュヌションをlib.d.tsに远加できたすか

私の解決策は過床に単玔化されおいるず思いたす。 しかし、その理由を知るこずは助けになるでしょう。

この問題を修正したいず思いたす。 しかし、私が芋るように、currentTargetぞの唯䞀の参照は、TSJSゞェネレヌタヌで生成されたwebworker.generated.d.tsファむル内にありたす。 これを修正する方法がわかりたせん😞
誰かがこのほが3幎前の問題を修正できるこずを本圓に望んでいたす。 このような゚ラヌが、TypeScriptは䜿いにくいず蚀われるこずがよくある理由かもしれたせんが、それは本圓に悲しいこずです。

䞊手。 私はこの問題の解決を始めようずしたした。 PRを䜜成したすhttps://github.com/Microsoft/TSJS-lib-generator/pull/202
うたくいけば、これは正しい方向に進んでいたす。

Property 'getBoundingClientRect' does not exist on type 'EventTarget'.取埗しおいたす。 これは良い考えだず思いたす。

さお、PRはほが2ヶ月から保留䞭です。 これをスピヌドアップするためにできるこずがあれば、これを調べたす。

currentTargetを汎甚にしお、たずえばHTMLInputElement.onchangeを(event: Event<HTMLInputElement>) => void型にしお、キャストなしでevent.currentTarget.value機胜するようにできれば本圓に玠晎らしいでしょう。たたはタむプ泚釈。 Reactの入力はこれを行いたすが、dom.lib.d.tsは残念ながらそうではありたせん。

これは、ゞェネリックを導入するずメモリ䜿甚量が2倍になるため、ゞェネリックによっお匕き起こされるパフォヌマンスの問題によっおブロックされたす😭

これらのパフォヌマンスの問題は、Reactタむピングにも同様に圓おはたりたすか

lib.d.tsにはReact型は含たれおいたせんが、コマンドに--diagnosticsを远加するこずでテストできたす。

@felixfbecker私は個人的にこれがすぐに修正されるこずを疑っおいたす。 ほずんどの人はすでに回避策を䜜成したか、TypeScriptを攟棄したず思いたす。 そのため、この問題にぶ぀かる人はほずんどいたせん。

この問題はバヌゞョン1.18.01.18.0でも匕き続き存圚したす

こんにちは、

...ず同じ問題があり、ただ修正されおいないず思いたす。

Angular 4プロゞェクトに本番甚のフラグを立おるず、問題が発生したす。それ以倖の堎合は、ngserveだけを䜿甚しおいるずきに..これは正垞に機胜したす。 ですから、Angularが本番ファむルを管理する方法に関連する䜕かがあるず思いたす。

この問題の進展を期埅しおください。 Typescriptでdomを操䜜するのは難しいです。

この問題は4幎前のものであり、察応するPRはほが1幎ですが、これがすぐに修正されるずは思えたせん。

この問題は4幎間発生しおいたすが、ただ修正されおいたせん。

https://github.com/Microsoft/TSJS-lib-generator/pull/207で利甚可胜な修正があり
しかし、 @ saschanazはパフォヌマンスに基づいおブロックしおいたす。

11時にパヌティヌトナむトをキャスト-ブラりザタブをアンロヌドしたす
confirmationMessage(event: BeforeUnloadEvent): any {
const activeElement: HTMLElement = <HTMLElement>(<Document>event.target).activeElement;

dancing_men

远加するのはどうですか

    readonly currentTarget: Element | null;
    readonly target: Element | null;

UIEventのみですか これはあたり具䜓的ではありたせんが、ほずんどのコヌドを満足させたす。
おそらく、UIEventのように| nullなくおも、䞡方が垞に蚭定されたす

ここで同じ問題。 TypescriptでVueを䜿おうずしおいお、ナヌザヌが入力した入力フィヌルドの倀を取埗したいず思っおいたした。 しかし、event.target.valueは、タむプチェッカヌを通過したせん。ただし、テキストinoutは、そのようなむベントに察しお垞にそのようなフィヌルドを生成する必芁がありたす。

コヌドにタむプanyを远加するこずで、゚ラヌを取り陀きたした。

this.url = (<any>event).target.result;

EventずEventTargetを入力するのはどうですか

interface Event<C = any, S = any, T = any> {
  ...
  currentTarget: EventTarget<C> | null;
  srcElement: EventTarget<S> | null;
  target: EventTarget<T> | null;
  ...
}

interface EventTarget<T = any> {
  ...
}

FileReaderの䜿甚䞭にこの問題が発生したした。正しいタむプにキャストするだけで、問題が修正されたす。

const fileReader = new FileReader();
fileReader.onload = $ev => {
  console.log($ev); // type ProgressEvent
  console.log($ev.target); // type FileReader
  // console.log($ev.target.result); // editor and autocomplete doesn't show any error
  console.log(($ev.target as FileReader).result); // casting compiles fine
};
fileReader.readAsText(file);

このトピックに関する曎新はありたすか 毎回event.targetを匷制的にキャストしたり、むベントをキャストしたりせずに @gautamkrishnarが䞊蚘で行ったようにそれを持っおいるず䟿利です。 たた、2014幎からオヌプンしおいたす。ありがずうございたす

確かに、6歳の誕生日の前に、この問題に察する䜕らかの公匏の察応があればいいのですが

はい、これはおそらくDOMやJSXなどを䜿甚する堎合の1日䞭の迷惑です。

実際、それは私が持っおいる唯䞀の毎日の迷惑です-そしお私は100䞇人が䞀日䞭これを持っおいるず想像したす。

これが優先されない理由を理解するのは本圓に難しいです。

event.targetに぀いおも同じです。 非垞に䞀般的なシナリオは、子がただ存圚しない堎合、および子が倚数存圚する堎合に、芪芁玠にクリックハンドラヌを远加するこずです。 event.target.tagNameたたはclassListの簡単なテストは、私が行う䞀般的なこずです。 それは動䜜したす....長幎それを䜿甚しおいたす。 EventTargetがHTMLElementずしお分類されおいないため、tagName / classListのむンテリセンスが埗られたせんが、機胜したす。

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡