L08084のブログ

技術記事の執筆は、祈りに近い

TypeScriptエラー「error TS2345: Argument of type '{}' is not assignable to parameter of type 'KeyboardEvent'. Property 'altKey' is missing in type '{}'.」

f:id:l08084:20180214132914p:plain

はじめに

Angularでキーボードの→↓←↑とかspaceキーを押した時のイベントを検知するコードを書いていたら発生したエラーとなります。

  • 発生したエラー
ERROR in src/app/app.component.ts(71,21): error TS2345: Argument of type '{}' is not assignable to parameter of type 'KeyboardEvent'.
  Property 'altKey' is missing in type '{}'.
  • 発生したエラー(日本語)
severity: 'エラー'
message: '型 '{}' の引数を型 'KeyboardEvent' のパラメーターに割り当てることはできません。
  型 '{}' にプロパティ 'altKey' がありません。'

開発環境

  • Angular@5.2.0

  • TypeScript@2.5.3

エラーが発生した時のコード

ngOnInit() {
    this.newGame();
    this.subscription = Observable.fromEvent(document, 'keydown').subscribe(e => {
      this.keyPress(e); // <- ここでエラーが発生
    });
  }

  keyPress(event: KeyboardEvent) {
    console.log(event.code);
  }

エラーを修正した後のコード

eventオブジェクトの型定義をしてあげたら直ります

  ngOnInit() {
    this.newGame();
    // 「e」 を「(e: KeyboardEvent) =>」に修正
    this.subscription = Observable.fromEvent(document, 'keydown').subscribe((e: KeyboardEvent) => {
      this.keyPress(e);
    });
  }

  keyPress(event: KeyboardEvent) {
    console.log(event.code);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }