title: Issue with child scoping of this in Typescript
body: <p>This is <em>ALMOST</em> the same as every other <code>this</code> scoping question I have read so far other than one slight difference which makes it relevant (imo) to ask this question.</p>
  
  <p>Now originally my problem was scoping of <code>this</code> with Knockout and Typescript, so given the following:</p>
  
  <pre><code>class ViewModel
  {
      public SomeObservableArray = new ko.observableArray();
  
      public AddToTheObservableArray(someJsonData: any) 
      {
          this.SomeObservableArray.push(new SomePojo(someJsonData));
      }
  }
  </code></pre>
  
  <p>So the <code>this</code> bit in the above code would blow up because Typescript makes you think that <code>this</code> is the class instance, but in reality it is some other this because of an ajax callback or view element, whatever the scenario that overrides the <code>this</code> keyword.</p>
  
  <p>So to fix that, most solutions are to move that code into the constructor for the class, which I personally find horrible, however this small amount of horror is acceptable given the other benefits I get from using TypeScript. So just so we are all on the same page, the code below fixes the above problem:</p>
  
  <pre><code>class ViewModel
  {
      public SomeObservableArray = new ko.observableArray();
      public AddToTheObservableArray = (someJsonData: any) =&gt; Void;
  
      constructor
      {
          this.AddToTheObservableArray = (someJsonData: any) =&gt; {
              this.SomeObservableArray.push(new SomePojo(someJsonData));
          };
      }
  }
  </code></pre>
  
  <p>I am just writing this example code off top of my head so I apologize for any typos etc, but it hilights the common issue faced and the common solution/work around.</p>
  
  <p><strong>NOW!</strong> the issue I have is the next step from here, I have code like so:</p>
  
  <pre><code>class ViewModel
  {
      public SomeObservableArray = new ko.observableArray();
      public AddToTheObservableArray = (someJsonData: any) =&gt; Void;
  
  
      constructor
      {
          this.PopulateObservableArray = (someJsonArrayData: any) =&gt; {
              this.SomeObservableArray.removeAll();
              someJsonArrayData.forEach(function(someJsonData) {
                  this.SomeObservableArray.push(new SomePojo(someJsonData));
              });
          };
      }
  }
  </code></pre>
  
  <p>The outputted code looks like so:</p>
  
  <pre><code>var ViewModel = (function(){
      function ViewModel(){
          var _this = this;
  
          this.SomeObservableArray = new ko.observableArray();
  
          this.AddMultipleEntitiesToObservableArray = function(someJsonArrayData) {
              _this.SomeObservableArray.removeAll();
              someJsonArrayData.forEach(function(someJsonData) {
                  this.SomeObservableArray.push(new SomePojo(someJsonData));
              });
          }
      };
      return ViewModel;
  })();
  </code></pre>
  
  <p>Again I apologise for any typos as I am just simplifying the larger projects output, however the main thing to see here is that the forEach methods child <code>this</code> remains, so I get the error <code>this.SomeObservableArray is undefined</code>.</p>
  
  <p>I am sure 1 possible solution is to extract the foreach out and make it its own method, however this then feels like sticking cellotape over blutack, so I was wondering if there is some more elegant solution or some wrongdoing on my part which can be changed to at least not have to make it more unreadable.</p>