title: Typescript and wrong type inside of click handler
body: <p>My TypeScript</p>
  
  <pre><code>export class CustomerUIModel implements CustomerIntrerfaces.ICustomerUI {
  
      public customers: KnockoutObservableArray&lt;CustomerIntrerfaces.ICustomer&gt;;
      service: CustomerIntrerfaces.ICustomerService;
  
  
  
      constructor(svc: CustomerIntrerfaces.ICustomerService, data: CustomerIntrerfaces.ICustomer[]) {
          this.service = svc;
          this.customers = ko.observableArray(data);
      }
  
      public AddCustomer(elem: CustomerIntrerfaces.ICustomer): void {
          this.service.Insert(elem)
              .then(cRes =&gt; {
                  this.customers.push(elem);
              })
              .catch(r =&gt; {
                  alert(r.message);
              });
      }
  }}
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>        &lt;tbody data-bind="foreach: customers"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" class="form-control" size="5" data-bind="value: CustomerID" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="form-control" data-bind="value: CompanyName" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="form-control" data-bind="value: ContactName" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="form-control" data-bind="value: Country" /&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="button" class="form-control" value="Insert" data-bind='click: $root.AddCustomer' /&gt;
                  &lt;input type="button" class="form-control" value="Delete" data-bind='click: $root.DeleteCustomer' /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>
  
  <p>When I click on "Insert" I get into AddCustomer() but <em>this.service</em> is NULL as well as <em>customers</em>. Moreover,"this" has a CustomerIntrerfaces.ICustomer, not a CustomerIntrerfaces.ICustomerService as I expect. How can I have this fixed?</p>