“State”类型的参数不可分配给“never”类型的参数

Question

我刚刚开始在 React 中使用 typescript。我尝试将它与 React useReducer 挂钩一起使用，但由于一个奇怪的错误而陷入困境。

这是我的代码：

    export interface ContractObj {
      company: string;
      negotiationRenewalDate: string;
      periodEnd: string;
      periodStart: string;
      scheduleForRenewal: boolean;
      contractId: string;
    }

    type State = {
      loading: boolean;
      error: boolean;
      contractsData: ContractObj[];
    };

    type Action =
      | { type: 'FETCH_SUCCESS'; payload: ContractObj[] }
      | { type: 'FETCH_ERROR'; payload: null };

    const initialState: State = {
      loading: true,
      error: false,
      contractsData: []
    };

    const reducer = (state: State, action: Action) => {
      switch (action.type) {
        case 'FETCH_SUCCESS':
          return {
            loading: false,
            error: false,
            contractsData: action.payload
          };
        case 'FETCH_ERROR':
          return {
            loading: false,
            error: true
          };
        default: {
          return state;
        }
      }
    };
    export const Contracts: React.FC<Props> = () => {
      const [state, dispatch] = useReducer(reducer, initialState);

当我将鼠标悬停在initialStateie 上时，它给我一个错误“State”类型的参数不能分配给“never”类型的参数

Answer 1

确保函数State中始终返回相同的类型reducer。如果将鼠标悬停在 上reducer，您会看到它当前具有以下签名：

const reducer: (state: State, action: Action) => State | {loading: boolean; error: boolean;}

也就是说，因为case 'FETCH_ERROR',contractsData被省略，它被定义为 中的必需属性State。reducer通过向函数添加显式返回类型可以轻松修复它：

const reducer = (state: State, action: Action): State => { ... }

并且您会收到（在本例中令人满意！）编译错误，抱怨缺少属性。最后，您可以在案例中添加一个空contractsData数组'FETCH_ERROR'，或者在类型中将属性定义为可选State。

解决方案一：

switch (action.type) {
    case 'FETCH_ERROR':
        return {
            loading: false,
            error: true,
            contractsData: []
        }
}

解决方案2：

type State = {
    loading: boolean;
    error: boolean;
    contractsData?: ContractObj[];
};

操场