title: KeyListener in TypeScript and "this" context
body: <p>I'm writing a Snake game in TypeScript and have trouble defining a KeyListener (arrow keys for changing Snake direction).</p>
  
  <p>I have a 4 layer architecture and key events are handled in the Gui Class. This holds the Snake object, draws the snake and handles key events.</p>
  
  <p>I tried the normal way, but inside handleEvt the snake object is undefined.</p>
  
  <pre><code>document.addEventListener("keydown", handleEvt)
  </code></pre>
  
  <p>So I tried the fat arrow method, but now the function doesn't get called at all. I suspect that the key listener changed context and is not working on the window anymore</p>
  
  <pre><code>document.addEventListener("keydown", () =&gt; handleEvt)
  </code></pre>
  
  <p>Can anyone explain what the problem is here? It would be much appreciated!</p>
  
  <p>Below is my Gui Class:</p>
  
  <pre><code>/// &lt;reference path="../model/Snake.ts" /&gt;
  /// &lt;reference path="../model/Direction.ts" /&gt;
  /// &lt;reference path="../model/Part.ts" /&gt;
  /// &lt;reference path="../dao/Dao.ts" /&gt;
  /// &lt;reference path="../service/Service.ts" /&gt;
  /// &lt;reference path="../model/IPosObject.ts" /&gt;
  
  module gui {
  
      export class Gui {
          snake:model.Snake;
          canvas:HTMLCanvasElement;
          ctx:CanvasRenderingContext2D;
          loop:any;
  
          lineWidth:number;
          canvasSize:number;
          loopSpeed:number;
          unitLength:number;
  
          constructor(snake:model.Snake) {
              // init constants
              this.snake = snake;
              this.lineWidth = 3;
              this.canvasSize = 200;
              this.loopSpeed = 1000/60;
              this.unitLength = 5;
  
              // init canvas
              this.canvas = document.getElementsByTagName("canvas")[0];
              this.canvas.width = this.canvasSize;
              this.canvas.height = this.canvasSize;
              this.ctx = this.canvas.getContext("2d");
  
              // Attach key event
  //            document.addEventListener("keydown", this.handleEvt);
              document.addEventListener("keydown", () =&gt; this.handleEvt);
  
              // activate game loop
              this.loop = setInterval( () =&gt; this.gameLoop(), this.loopSpeed );
          }
  
          handleEvt(e):void {
              var direction:model.Direction;
  
              if (e) {
                  switch (e.which) {
                      case 37:
                          console.log("left");
                          direction = model.Direction.Left;
                          break;
                      case 38:
                          console.log("up");
                          direction = model.Direction.Up;
                          break;
                      case 39:
                          console.log("right");
                          direction = model.Direction.Right;
                          break;
                      case 40:
                          console.log("down");
                          direction = model.Direction.Down;
                          break;
                  }
  
                  this.snake.changeDirection(direction);
              }
          }
  
          gameLoop():void {
              if (this.snake) {
                  this.drawSnake();
              }
          }
  
          drawSnake() {
            // draw parts
          }
      }
  
  }
  </code></pre>