title: Javascript - "Compound" Class Inheritance
body: <p>Not to be confused with inheriting from multiple classes.</p>
  <p>Suppose there's a class, Player, with its own methods and properties:</p>
  <pre><code>class Player {
  //...
  }
  </code></pre>
  <p>Next, suppose there's a class which extends from Player, with its own special properties</p>
  <pre><code>class SpecificPlayer extends Player {
    constructor() {
      super();
      this.foo = &quot;bar&quot;;
    }
  }
  </code></pre>
  <p>Now suppose there's another class, Core, with a property of type <code>Player[]</code> (types are defined through JSDoc-style comments in VSCode), and a method which returns a portion of that array.</p>
  <pre><code>class Core {
    constructor(players) {
      /** @type {Player[]} */
      this.players = players;
    }
  
    getSomePlayers() {
      return this.players.filter(...);
    }
  }
  </code></pre>
  <p>Finally, let there be a class which extends from Core, with a constructor and method as follows:</p>
  <pre><code>class SpecificClass extends Core {
    /** @param {SpecifcPlayer[]} players */
    constructor(players) {
      super(players);
    }
  
    doThing() {
      console.log(this.players[0].foo);
      this.getSomePlayers().forEach(p =&gt; console.log(p.foo));
    }
  }
  </code></pre>
  <p>Now, if the following main body code is ran:</p>
  <pre><code>const SpecificInstance = new SpecificClass([new SpecificPlayer(), new SpecificPlayer()]);
  SpecificInstance.doThing();
  </code></pre>
  <p>Everything is fine and dandy -- &quot;bar&quot; is printed successfully for all log statements.</p>
  <p>However, when writing the code (specifically the body of <code>doThing</code>), VSCode Intellisense would only recognize <code>this.players</code> as a type of <code>Player</code>, meaning it wouldn't recognize the property <code>foo</code>. How would I go about writing the classes such that the VSCode autocomplete/Intellisense recognizes the correct type of <code>this.players</code>, and each method in <code>Core</code> which uses <code>this.players</code> also returns the correct type of <code>SpecificPlayer</code>? Realistically, there are several classes extending from Core, some with their own special variation on Player. As such, the types returned should be that which was provided originally to the constructor.</p>
  <p>(Or is there a better way to organize/format my code?)</p>