title: Using generics in es6 Map with Typescript
body: <p>I've got a project in Typescript 2.0 and I'm using <code>es6</code> as my module, with the lib <code>es2017</code> included so I can use maps. I've got everything working except I seem to need to do some unnecessary casts.</p>
  
  <pre><code>static readonly gameStateMap: Map&lt;GameState, Phaser.State&gt; = new Map([
      [GameState.PONG, new PongState() as Phaser.State],
      [GameState.BREAKOUT, new BreakoutState() as Phaser.State]
  ]);
  </code></pre>
  
  <p>Why do I need to cast them to <code>Phaser.State</code>? Since they both directly extend <code>Phaser.State</code> I thought I should be able to just stick them in the map with no problem.</p>
  
  <p>I thought maybe I just needed to refine my generics declaration, so I tried: </p>
  
  <p><code>Map&lt;GameState, V extends Phaser.State&gt;</code>. </p>
  
  <p>I see that syntax used in <a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noreferrer">Typescript's generics docs</a>.</p>
  
  <p>But it doesn't work. Is this an ES6 generic and that's my problem? How can I fix this to not need to cast?</p>
  
  <p>Also, this issue only occurs if the classes in question have different properties. The error is:</p>
  
  <pre><code>error TS2345: Argument of type '((GameState | PongState)[] | (GameState | BreakoutState)[])[]' is not assignable to parameter of type 'Iterable&lt;[GameState, State]&gt;'.
  </code></pre>