title: TypeScript And Serverless: `this` Undefined When Calling Private Methods from Public Methods
body: <p>I am trying to build an AWS Serverless(<a href="https://serverless.com/" rel="nofollow noreferrer">https://serverless.com/</a>) function in TypeScript. </p>
  
  <p>Specifically, I am defining an abstract class with a single public method that calls some private methods. </p>
  
  <p>Here is my simplified TypeScript class:</p>
  
  <pre><code>export abstract class AbstractPayloadProcessor {
  
      private preHandlePayload(payload) {
          console.log('arrived in prehandle method')
      }
  
      private postHandlePayload(payload) {
          console.log('arrived in posthandle method')
      }
  
      protected handleException(error) {
          console.log('Exception has occurred:', error)
      }
  
      public processPayload(event) {
  
          // this is the problematic line
          this.preHandlePayload(event.payload)
          .
          .
          .
      }
  }
  </code></pre>
  
  <p>I use webpack transpile this into ES5, which produces the following JavaScript: </p>
  
  <pre><code>var AbstractPayloadProcessor = /** @class */ (function () {
      AbstractPayloadProcessor.prototype.preHandlePayload = function (payload) {
          console.log('arrived in prehandle method');
      };
      AbstractPayloadProcessor.prototype.postHandlePayload = function (payload) {
          console.log('arrived in posthandle method');
      };
      AbstractPayloadProcessor.prototype.handleException = function (error) {
          console.log('Exception has occurred:', error);
      };
      AbstractPayloadProcessor.prototype.processPayload = function (event) {
          // this line throws the exception
          this.preHandlePayload(event.payload);
          .
          .
          .
  }());
  </code></pre>
  
  <p>The exact exception is:</p>
  
  <pre><code>TypeError: Cannot read property 'preHandlePayload' of undefined
  </code></pre>
  
  <p>So far, I have tried setting the webpack config to use ES6 and have tried to use arrow functions to declare the functions in typescript. Both produce the same exception.</p>
  
  <p>The <code>processPayload</code> function is being called <em>somewhere</em> within the Serverless framework, but I do not know the implementation details. If anyone has experience with the framework and can shed some light on that, I would appreciate it.</p>
  
  <p>Thanks for reading.</p>