typescriptの再帰が定義されていない

Question

私のコンポーネントの中でキャンバスオブジェクトを使用してグラフを生成しています。それをアニメーション化するために、私はメソッドを再帰的に呼び出しています。このメソッドが定義されていないというエラーが表示され続けます。どのように構造化する必要があるか分かりません。

ありがとうございました。

// Animate function 
protected animate(draw_to) { 
// Clear off the canvas 
this.ctx.clearRect(0, 0, this.width, this.height); 
// Start over 
    this.ctx.beginPath(); 
// arc(x, y, radius, startAngle, endAngle, anticlockwise) 
// Re-draw from the very beginning each time so there isn't tiny line spaces between each section (the browser paint rendering will probably be smoother too) 
    this.ctx.arc(this.x, this.y, this.radius, this.start, draw_to, false); 
// Draw 
    this.ctx.stroke(); 
// Increment percent 
    this.curr++; 
// Animate until end 
    if (this.curr < this.finish + 1) { 
    // Recursive repeat this function until the end is reached 
    requestAnimationFrame(function() { 
     error happens here >>> this.animate(this.circum * this.curr/100 + this.start); 
    }); 
    } 
} 

Answer 1

あなたがrequestAnimationFrameに与える関数内で同じコンテキストを維持するには、矢印関数を使用する必要があります。

requestAnimationFrame(() => { 
     error happens here >>> this.animate(this.circum * this.curr/100 + this.start); 
    }); 

Answer 2

別のオプションは次のとおりです。

requestAnimationFrame(this.animate.bind(this, this.circum * this.curr/100 + this.start)); 

あなたは既にパラメータとともに正しいthisにバインドされているthis.animateへの参照を渡しています。