TypeScriptで「ERROR TypeError: XXX is not a function」が頻発する

f:id:l08084:20180212140718p:plain

はじめに

TypeScriptでコードを書いていた所、呼び出し先の関数を定義しているのに、「XXX is not a function」が発生する事象に苦しんだため、対応方法について記述する。

ERROR TypeError: this.isMobile is not a function
    at AppComponent.tick (app.component.ts:166)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2025)

エラー詳細

エラーが発生した時のコードを一部抜粋する。

  newGame() {
    this.interval = setInterval(this.tick, 250);
  }

  tick() {
    if (this.isMobile(0, 1)) { // <- is not a functionエラーが発生する
      this.currentY += 1;
    } else {
      this.freeze(); // <- is not a functionエラーが発生する
      this.clearLines(); // <- is not a functionエラーが発生する
      this.newShape(); // <- is not a functionエラーが発生する
    }
  }

isMobileメソッドの呼び出し部分で最初、ERROR TypeError: this.isMobile is not a functionエラーが発生したため、isMobileメソッドの呼び出し部分をコメントアウトするなどしたが、それ以降のメソッドを呼び出している部分でも同様にERROR TypeError: XXX is not a functionエラーが発生し続けた。

エラー原因

setInterval()部分の記載が間違っていたのが原因だった。

修正後のソースコード

  newGame() {
    this.interval = setInterval(() => this.tick(), 250); // this.tick を () => this.tick()に修正した
  }

  tick() {
    if (this.isMobile(0, 1)) { 
      this.currentY += 1;
    } else {
      this.freeze();
      this.clearLines();
      this.newShape();
    }
  }