Typescript 错误:: 类型“数字”不可分配给类型“从不”

Question

I got a problems about

'Type 'number' is not assignable to type 'never'.'
'Type 'number' is not assignable to type 'never'.'
'Type 'string' is not assignable to type 'never'.'
'Type 'number' is not assignable to type 'never'.'

on each id , col , color , height . for 4 times which are located in ColsContextProvider .

And I think it might be problem of Colstate[] but I cannot find the way to solve it.

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<ColState[] | void>(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<Action>;
const ColsDispatchContext = createContext<ColsDispatch | undefined>(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 (
    <ColsDispatchContext.Provider value={dispatch}>
      <ColsStateContext.Provider value={cols}>
        {children}
      </ColsStateContext.Provider>
    </ColsDispatchContext.Provider>
  );
}

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;
}

Answer 1

You need to return a proper state in colsReducer .

You're returning console.log() in colsReducer function. That makes the return type of colsReducer void | Square[][] void | Square[][] , which is unable to infer, so the type of second parameter in useReducer becomes never .

Edit code like below, and see what you have to do.

function colsReducer(state: ColState[], action: Action) {
  // ...
}

change to:

function colsReducer(state: ColState[], action: Action): ColState[] {
  // ...
}