活字体キーボードイベントは：</p> ​​ <p>私はイベントタイプを定義しようとしました：コードは完璧に実行してもタイプ「イベント」の引数は「KeyboardEventの」

Question

次のエラーI'have型のパラメータに割り当て可能ではありませんKeyboardEventのために、私は次のようなエラーがあります。

window.addEventListener(eventName, (e:KeyboardEvent) => { 
      this.handleEvent(e); // <- error here 
     }); 


TS2345: Argument of type '(event: KeyboardEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'. 
    Type '(event: KeyboardEvent) => void' is not assignable to type 'EventListenerObject'. 
Property 'handleEvent' is missing in type '(event: KeyboardEvent) => void'. 

を問題に通過または解決する方法はありますか？

Answer 1

TypeScriptは完全な跳躍をここで行うことはできません。なぜなら、それは最も一般的なイベントタイプが使用されるため、イベント名が文字列になるからです。例を実行しているスタンドアロンに変換以下

例 - 私はデモのために、「クラスの外」のものを撮影した...

文字列を使用すると、型の安全性を保証することができますkeyup​​であり、一方で、

let listenTo = (window: Window) => { 
    ['keydown', 'keyup'].forEach(eventName => { 
    window.addEventListener(eventName, e => { 
     handleEvent(<any>e); 
    }); 
    }); 
} 

let handleEvent = (event: KeyboardEvent) => { 
    const { key } = event; 
    //... 
} 

イベント名の配列に他の文字列が追加されていると、これは失敗します。専門的な署名に、直接文字列を使用している場合

完全な型の安全性が提供されています：

window.addEventListener('keydown', e => { 
    handleEvent(e); // e is KeyboardEvent 
    }); 

だから、あなたは正しいタイプの良さを得るために、より強くあなたの配列を入力できます。

で

type KeyboardEventNames = 'keydown' | 'keyup'; 

let listenTo = (window: Window) => { 
    const eventNames: KeyboardEventNames[] = ['keydown', 'keyup']; 
    eventNames.forEach(eventName => { 
    window.addEventListener(eventName, e => { 
     handleEvent(e); 
    }); 
    }); 
} 

let handleEvent = (event: KeyboardEvent) => { 
    const { key } = event; 
    //... 
} 

この最後の例では、配列内の要素の型をキーボードイベント名のみに戻しているので、コンパイラは古い文字列を処理していないことを知り、イベント型を推論することができます。