title: TS2322 Type X | Y | Z[] is not assignable to type Z[]- Typescript
body: <p>I am new to Typescript and in the process of migrating my react native code base to Typescript. There is a strange error that I cannot get resolved however I tried. 
  here is the reducer:</p>
  
  <pre><code>const INITIAL_STATE: MessagingState = {
  conversations: [],
  send: [],
  read: []
  };
  
  export default function (state: MessagingState = INITIAL_STATE, action: 
  UserMessagingActionTypes): MessagingState {
  switch (action.type) {
      case USER_CONVERSATIONS_RECEIVED:
          return {...state, conversations: action.payload};
      case USER_CONVERSATION_RECEIVED:
          return {
              ...state,
              conversations: [...state.conversations, action.payload]
          };
      default:
          return state;
     }
  }
  
  export interface MessagingState {
  conversations: Conversation[]
  send: StompMessage[]
  read: ChatMessage[]
  }
  </code></pre>
  
  <p>and the actions types:</p>
  
  <pre><code>export interface UserConversationsReceived {
  type: typeof USER_CONVERSATIONS_RECEIVED,
  payload: Conversation[]
  }
  
  export interface UserConversationReceived {
  type: typeof USER_CONVERSATION_RECEIVED,
  payload: Conversation
  }
  
  export interface UserStompUnseenMessageReceived  {
  type: typeof MESSAGING_ACTIONS.USER.UNSEEN_MESSAGE_RECEIVED,
  payload: ChatMessage
  }
  
  
  export const MESSAGING_ACTIONS = {
    USER:{UNSEEN_MESSAGE_RECEIVED: 'UNSEEN_MESSAGE_RECEIVED'}
  }
  export const USER_CONVERSATION_RECEIVED= 'USER_CONVERSATION_RECEIVED';
  export const USER_CONVERSATIONS_RECEIVED = 'USER_CONVERSATIONS_RECEIVED';
  
  export type UserMessagingActionTypes =
  UserConversationsReceived
  | UserConversationReceived
  | UserStompUnseenMessageReceived;
  </code></pre>
  
  <p>I was expecting  type narrowing to kick in on my reducer, but I get the following two errors in the return statements in the reducer:</p>
  
  <p><strong><em>Error:(14, 31) TS2322: Type 'Conversation | ChatMessage | Conversation[]' is not assignable to type 'Conversation[]'.
    Type 'Conversation' is missing the following properties from type 'Conversation[]': length, pop, push, concat, and 26 more.</em></strong></p>
  
  <p><em>Error:(18, 17) TS2322: Type '(Conversation | ChatMessage | Conversation[])[]' is not assignable to type 'Conversation[]'.
    Type 'Conversation | ChatMessage | Conversation[]' is not assignable to type 'Conversation'.
      Type 'ChatMessage' is missing the following properties from type 'Conversation': title, unreadMessages, messages</em></p>
  
  <p>Why Conversaion[] is not assignable to Conversation[]? </p>
  
  <p><strong>Edit 1:</strong>
   This piece is the culprit:</p>
  
  <pre><code>export const MESSAGING_ACTIONS = {
    USER:
     {UNSEEN_MESSAGE_RECEIVED: 'UNSEEN_MESSAGE_RECEIVED'}
  }
  </code></pre>
  
  <p>When I change this to a string const like this:</p>
  
  <pre><code>export const UNSEEN_MESSAGE_RECEIVED: 'UNSEEN_MESSAGE_RECEIVED';
  </code></pre>
  
  <p>the issue gets resolved. I dont know how <strong>typeof</strong> is different between the two of them. They are both string. But whats going on with the compiler, I dont know.</p>