title: How to create mixin pattern to bubble events up the inheritance hierarchy?
body: <p>I am writing an Angular 6 + NodeJS socket.io application front and backend. I am using Typescript 2.7 from the ng6 package but this question is purely backend server.</p>
  
  <p>Is it possible to write a mixin pattern to bubble socket events up the mixin hierarchy chain?</p>
  
  <p>Below is desired pseudo-code:</p>
  
  <pre><code>interface IEventHandler {
      public handleEvent(eventType:string);
  }
  
  class DangerHandler&lt;T extends IEventHandler&gt; extends T implements IEventHandler {
      public handleEvent(eventType:string) {
          if(eventType == 'dangerous') {
              console.log('handled dangerous event');
              return true;
          }
          super.handleEvent(eventType);
      }
  }
  
  class SarcasmHandler&lt;T extends IEventHandler&gt; extends T implements IEventHandler {
      public handleEvent(eventType:string) {
          if(eventType == 'sarcastic') {
              console.log('handled sarcastic event');
              return true;
          }
          super().handleEvent(eventType);
      }
  }
  
  class Person implements IEventHandler {
      constructor(public name:string) {}
      public handleEvent(eventType:string) {
          console.log('I dont know how to handle events, but my children will handle it') ;
      }
  }
  
  var smartPerson = new DangerHandler&lt;SarcasmHandler&lt;Person&gt;&gt;('Jim');
  smartPerson.handleEvent('sarcastic');
  // --&gt; 'handled sarcastic event'
  </code></pre>
  
  <p>In the example above, I have a Person class that will encounter different events he has to handle, but he does not know what kind of events yet.</p>
  
  <p>I want to be able to create a new Handler mixin to handle new events as they are discovered.</p>
  
  <p>In this example, it is shown that handleEvent will be override by each chained mixin, and if the grandchild cannot handle the event, it will bubble up the chain to its parent to handle.</p>
  
  <p>How can I achieve this pattern in TypeScript 2.7 or the latest version?</p>
  
  <p>==============</p>
  
  <p>EDIT:</p>
  
  <p>OK, trying a bit more after posting this quest gives me this:</p>
  
  <pre><code>class EventHandler {
      public handleEvent(eventType:string):void {
          console.log('to be overriden');
      }
  }
  
  class Person extends EventHandler {
      constructor(public name:string){ super(); }
      public handleEvent(eventType:string) {
          console.log('I dont know how to handle, expect children to handle');
      }
  }
  
  type Mixin&lt;T extends EventHandler = EventHandler&gt;  = new (...args:any[]) =&gt; T;
  function DangerHandler&lt;TBase extends Mixin&gt;(Base: TBase) {
      return class extends Base {
          public handleEvent(eventType:string):void {
              if(eventType == 'danger') {
                  console.log('danger handled');
              } else {
                  super.handleEvent(eventType);
              }
          }
      }
  }
  function SacarsmHandler&lt;TBase extends Mixin&gt;(Base: TBase) {
      return class extends Base {
          public handleEvent(eventType:string) {
              if(eventType == 'sacarsm') {
                  console.log('sacarsm handled');
              } else {
                  super.handleEvent(eventType);
              }
          }
      }
  }
  
  const SmartPerson = DangerHandler(SacarsmHandler(Person));
  var person = new SmartPerson('Jim');
  person.handleEvent('danger');
  person.handleEvent('sacarsm');
  person.handleEvent('embarassment');
  </code></pre>
  
  <p>But I cannot figure out what is: T extends EventHandler <strong>= EventHandler</strong>
  in <code>type Mixin&lt;T extends EventHandler = EventHandler&gt;  = new (...args:any[]) =&gt; T;</code></p>
  
  <p>means. Can someone please explain?</p>
  
  <p>Also, if there is any other better way, please answer below. Thanks!</p>