title: Overriding methods from JavaScript function-based classes in TypeScript
body: <p>I'm trying to override a object method defined in JavaScript (ES5) function-based class:</p>
  
  <pre><code>var JSClass = function() {
    this.start = function() {
      console.log('JSClass.start()');
    }
  }
  </code></pre>
  
  <p>Then calling <code>start()</code> method prints as expected:</p>
  
  <pre><code>let o1 = new JSClass();
  o1.start();
  // prints: JSClass.start()
  </code></pre>
  
  <p>However, if I try to extend this object with a TypeScript class such as:</p>
  
  <pre><code>class TSClass extends JSClass {
    start() {
      super.start();
      console.log('TSClass.start()');
    }
  
    otherStart() {
      this.start();
      console.log('TSClass.otherStart()');
    }
  }
  </code></pre>
  
  <p>... then <code>TSClass::start()</code> is never called. Only the <code>start()</code> defined in <code>JSClass</code>.</p>
  
  <pre><code>let o2 = new TSClass();
  o2.start();
  o2.otherStart();
  </code></pre>
  
  <p>This prints just:</p>
  
  <pre><code>JSClass.start()
  JSClass.start()
  TSClass.otherStart()
  </code></pre>
  
  <p>I'd expect to print:</p>
  
  <pre><code>// by calling: o2.start();
  JSClass.start()
  TSClass.start()
  // by calling: o2.otherStart();
  JSClass.start()
  TSClass.start()
  TSClass.otherStart()
  </code></pre>
  
  <p>Is this by design? Then how can I extend ES5 object methods with TypeScript?</p>
  
  <p>See live demo: <a href="https://jsfiddle.net/martinsikora/2sunkmq7/" rel="nofollow noreferrer">https://jsfiddle.net/martinsikora/2sunkmq7/</a></p>
  
  <p>Edit: I ended up using this.</p>
  
  <pre><code>class TSClass extends JSClass {
  
    constructor() {
      var oldStart = this.start;
      this.start = () =&gt; {
        oldStart.call(this);
        console.log('TSClass.start()');
      }
    }
    // ...
  }
  </code></pre>
  
  <p>Now it works as expected.</p>