title: How do TypeScript mixins work (in Angular)?
body: <p>Currently I'm using mixins in Angular to extend my component's functions. All my mixins look like this:</p>
  <pre><code>export function mixinTest&lt;T extends AbstractConstructor&lt;ComponentBase&gt;&gt;(Base: T) {
      abstract class MixinTest extends Base {
          //Logic here
      };
  
      return MixinTest;
  }
  
  export function mixinTest2&lt;T extends AbstractConstructor&lt;ModelComponentBase&lt;unknown&gt;&gt;&gt;(Base: T) {
      abstract class MixinTest2 extends Base {
          //Logic here
      };
  
      return MixinTest2;
  }
  </code></pre>
  <p>Where <code>ComponentBase</code> is a base component of which I have several. I'm using a mix of inheritance and mixins. Inheritance, where it makes sense (to not lose Angulars annotations (@Input, @Output etc.) and mixin functions for <em>special</em> logic.</p>
  <p>Now I have a <code>ModelComponentBase&lt;T&gt;</code> too, that has a property <code>model: T</code>. If I now add a mixin that extends <code>ComponentBase</code> I lose the model property: the compiler tells me <code>Property 'model' does not exist on type 'TestComponent'.</code>:</p>
  <pre><code>export class TestComponent extends mixinTest(mixinTest2(ModelComponentBase))&lt;Task&gt; {
      method(): void {
          this.model$.subscribe(t =&gt; this.task = &lt;Task&gt;t);
      }
      task: Task;
  }
  </code></pre>
  <p>But it works, if I take care of the order:</p>
  <pre><code>export class TestComponent extends mixinTest2(mixinTest(ModelComponentBase))&lt;Task&gt; {
      method(): void {
          this.model$.subscribe(t =&gt; this.task = &lt;Task&gt;t);
      }
      task: Task;
  }
  </code></pre>
  <p><strong>or</strong> use only one mixin:</p>
  <pre><code>export class TestComponent extends mixinTest(ModelComponentBase)&lt;Task&gt; {
      method(): void {
          this.model$.subscribe(t =&gt; this.task = &lt;Task&gt;t);
      }
      task: Task;
  }
  </code></pre>
  <p><strong>and</strong> it even <strong>works</strong>, if I mixin the functions in multiple steps:</p>
  <pre><code>const ctor = mixinTest2(ModelComponentBase);
  const ctor2 = mixinTest(ctor);
  export class TestComponent extends ctor2&lt;Task&gt; {
      method(): void {
          this.model$.subscribe(t =&gt; this.task = &lt;Task&gt;t);
      }
      task: Task;
  }
  </code></pre>
  <p>Why does this make a difference? I thought it shouldn't matter? By the way: <code>AbstractContructor</code> is taken from Angular Material: <code>export declare type AbstractConstructor&lt;T = object&gt; = abstract new (...args: any[]) =&gt; T;</code></p>
  <p>So my questions are:</p>
  <ol>
  <li>Do I use mixins correct at all? Or is my <code>mixinTest</code> already malformed?</li>
  <li>Why does the order care? Why does the amount of mixins make a difference?</li>
  <li>Using mixins with <code>ModelComponentBase&lt;unknown&gt;</code> makes the model become type <code>unknown | T</code>. Is there a way to use generic parameters with my <code>mixinTest2</code>?</li>
  </ol>