web-dev-qa-db-ja.com

TypeScriptで押されたキーを検出する方法は？

TypeScriptのセマンティック上同等の構文は、JavaScriptの次の行と同じです。

//Some knockout event handler.
myFunc(data : string, evt : Event) {
    //If enter or tab key up were detected add the excuse to the collection.
    if(evt.enterKey || evt.which == 9)
        //Do Something
}

ここで発生する問題は、通常のJavaScriptイベントとは異なり、TypeScriptイベントクラスにはenterKeyまたはwhichプロパティがありません。では、TypeScriptコンパイルエラーと醜い赤い波状の下線を表示せずに、どのキーが押されているかをどのように検出しますか？

javascriptknockout.jstypescript
12
Alwyn

以下に示すように、より特殊なイベントタイプKeyboardEventを使用する必要があります。

myFunc(data : string, evt : KeyboardEvent)

evt.enterKeyのエラーも削除したい場合は、インターフェースを拡張して追加する必要があります。これは、CTRLのようなコントロールキーではないため、これが実際のプロパティであることは知りませんが、 SHIFTまたはALT。これらはすべてイベントのプロパティを持っています。

interface KeyboardEvent {
    enterKey: boolean;
}
33
Fenton

Reactユーザーの場合

  private onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(e.key)
  }

ここで、HTMLDivElementは、onKeyDownがアタッチされている要素のタイプです。

5
Damian Green

たとえば、イベントを登録する必要があります。

class EventHandler {
    static RegisterKeyPress(input: string){
        document.getElementById(input).addListener('keypress', (e: KeyboardEvent) =>{
           //You have yout key code here
            console.log(e.keyCode);
        }
    }
}

幸せなコーディング！

4
Jesus Gilberto Valenzuela