title: Typescript error :: Type 'number' is not assignable to type 'never'
body: <p>I got a problems about </p>
  
  <blockquote>
    <p>'Type 'number' is not assignable to type 'never'.'<br>
    'Type 'number' is not assignable to type 'never'.'<br>
    'Type 'string' is not assignable to type 'never'.'<br>
    'Type 'number' is not assignable to type 'never'.'</p>
  </blockquote>
  
  <p>on each <code>id</code>, <code>col</code>, <code>color</code>, <code>height</code>. for 4 times which are located in <code>ColsContextProvider</code>.</p>
  
  <p>And I think it might be problem of <code>Colstate[]</code> but I cannot find the way to solve it.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { createContext, Dispatch, useReducer, useContext } from "react";
  
  export const ADD_SQUARE = "ADD_SQUARE" as const;
  export const CHANGE_SQUARE = "CHANGE_SQUARE" as const;
  export const DELETE_SQUARE = "DELETE_SQUARE" as const;
  
  export type Square = {
    id: number;
    col: number;
    color: string;
    height: number;
  };
  
  type ColState = Square[];
  
  const ColsStateContext = createContext&lt;ColState[] | void&gt;(undefined);
  
  type Action =
    | {
        type: "ADD_SQUARE";
        id: number;
        col: number;
        color: string;
        height: number;
      }
    | { type: "CHANGE_SQUARE"; id: number; col: number; color: string }
    | { type: "DELETE_SQUARE"; id: number; col: number };
  type ColsDispatch = Dispatch&lt;Action&gt;;
  const ColsDispatchContext = createContext&lt;ColsDispatch | undefined&gt;(undefined);
  
  function colsReducer(state: ColState[], action: Action) {
    switch (action.type) {
      case ADD_SQUARE:
        return console.log("DELETE_SQUARE");
      case CHANGE_SQUARE:
        return console.log("CHANGE_SQUARE");
      case DELETE_SQUARE:
        return console.log("DELETE_SQUARE");
      default:
        return state;
    }
  }
  
  export function ColsContextProvider({
    children
  }: {
    children: React.ReactNode;
  }) {
    const [cols, dispatch] = useReducer(colsReducer, [
      [
        {
          id: 1,
          col: 1,
          color: "#111",
          height: 80
        },
        {
          id: 2,
          col: 1,
          color: "#aca",
          height: 110
        }
      ],
      [
        {
          id: 1,
          col: 2,
          color: "#cbb",
          height: 35
        }
      ],
      [
        {
          id: 1,
          col: 3,
          color: "#aac",
          height: 20
        }
      ]
    ]);
  
    return (
      &lt;ColsDispatchContext.Provider value={dispatch}&gt;
        &lt;ColsStateContext.Provider value={cols}&gt;
          {children}
        &lt;/ColsStateContext.Provider&gt;
      &lt;/ColsDispatchContext.Provider&gt;
    );
  }
  
  export function useColsState() {
    const state = useContext(ColsStateContext);
    if (!state) throw new Error("Cols provider problem");
    return state;
  }
  export function useColsDispatch() {
    const dispatch = useContext(ColsDispatchContext);
    if (!dispatch) throw new Error("Cols provider problem");
    return dispatch;
  }
  
  </code></pre>