title: Generic with union type throwing not assignable error
body: <p>I have a reducer that has an action creator that can be an array of two different types of object, each has their own interface. However, I am getting this error </p>
  
  <pre><code>Type '(A | B)[]' is not assignable to type 'B[]'.
    Type 'A | B' is not assignable to type 'B'.
      Property 'productionId' is missing in type 'A' but required in type 'B'
  </code></pre>
  
  <p>I suspect this error is due to both interface having similar values, except B has one extra value than A?</p>
  
  <p>Here is the <a href="https://www.typescriptlang.org/play/#src=interface%20A%20%7B%0D%0A%20%20id%3A%20number%3B%0D%0A%20%20name%3A%20string%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20B%20%7B%0D%0A%20%20id%3A%20number%3B%0D%0A%20%20productionId%3A%20number%3B%0D%0A%20%20name%3A%20string%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20IAction%3CData%3E%20%7B%0D%0A%20%20type%3A%20string%3B%0D%0A%20%20data%3A%20Data%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20ISelectionOptionsReducerState%20%7B%0D%0A%20%20a%3A%20A%5B%5D%3B%0D%0A%20%20b%3A%20B%5B%5D%3B%0D%0A%7D%0D%0A%0D%0Alet%20initialState%3A%20ISelectionOptionsReducerState%20%3D%20%7B%0D%0A%20%20a%3A%20%5B%5D%2C%0D%0A%20%20b%3A%20%5B%5D%0D%0A%7D%3B%0D%0A%0D%0Atype%20TAction%20%3D%20IAction%3CArray%3CA%20%7C%20B%3E%3E%3B%0D%0A%0D%0Atype%20TReducer%20%3D%20(%0D%0A%20%20state%3A%20ISelectionOptionsReducerState%2C%0D%0A%20%20action%3A%20TAction%0D%0A)%20%3D%3E%20ISelectionOptionsReducerState%3B%0D%0A%0D%0Aconst%20selectionOptionsReducer%3A%20TReducer%20%3D%20(%0D%0A%20%20state%3A%20ISelectionOptionsReducerState%20%3D%20initialState%2C%0D%0A%20%20action%3A%20TAction%0D%0A)%3A%20ISelectionOptionsReducerState%20%3D%3E%20%7B%0D%0A%20%20Object.freeze(state)%3B%0D%0A%0D%0A%20%20let%20newState%3A%20ISelectionOptionsReducerState%20%3D%20state%3B%0D%0A%0D%0A%20%20switch%20(action.type)%20%7B%0D%0A%20%20%20%20case%20&#39;1&#39;%3A%0D%0A%20%20%20%20%20%20newState.a%20%3D%20action.data%3B%0D%0A%20%20%20%20%20%20break%3B%0D%0A%20%20%20%20case%20&#39;2&#39;%3A%0D%0A%20%20%20%20%20%20newState.b%20%3D%20action.data%3B%0D%0A%20%20%20%20%20%20break%3B%0D%0A%20%20%20%20default%3A%0D%0A%20%20%20%20%20%20return%20state%3B%0D%0A%20%20%7D%0D%0A%0D%0A%20%20return%20newState%3B%0D%0A%7D%3B%0D%0A" rel="noreferrer">typescript playground</a> </p>
  
  <p>Here is the full reproducible code </p>
  
  <pre><code>interface A {
    id: number;
    name: string;
  }
  
  interface B {
    id: number;
    productionId: number;
    name: string;
  }
  
  interface IAction&lt;Data&gt; {
    type: string;
    data: Data;
  }
  
  interface ISelectionOptionsReducerState {
    a: A[];
    b: B[];
  }
  
  let initialState: ISelectionOptionsReducerState = {
    a: [],
    b: []
  };
  
  type TAction = IAction&lt;Array&lt;A | B&gt;&gt;;
  type TAction = IAction&lt;A[] | B[]&gt;; &lt;= this didn't work either
  
  type TReducer = (
    state: ISelectionOptionsReducerState,
    action: TAction
  ) =&gt; ISelectionOptionsReducerState;
  
  const selectionOptionsReducer: TReducer = (
    state: ISelectionOptionsReducerState = initialState,
    action: TAction
  ): ISelectionOptionsReducerState =&gt; {
    Object.freeze(state);
  
    let newState: ISelectionOptionsReducerState = state;
  
    switch (action.type) {
      case '1':
        newState.a = action.data;
        break;
      case '2':
        newState.b = action.data; &lt;= error happen here
        break;
      default:
        return state;
    }
  
    return newState;
  };
  </code></pre>