React useReducer参数数量错误TypeScript问题及解决

问题现象 #

使用React的useReducer Hook时触发TypeScript错误：

Invalid number of arguments in useReducer

提示预期传入3个参数，但实际调用代码仅传入了reducer函数和初始状态：

const [state, dispatch] = useReducer(
    passwordResetReducer,
    initialPasswordResetFormState
);

同时state的类型被推断为never，且多个结构类似的表单组件都出现该问题。

相关代码定义 #

reducer及类型定义如下：

export const passwordResetReducer = (
  state: PasswordResetFormState,
  action: PasswordResetAction
): PasswordResetFormState => {
  switch (action.case) {
    default:
      return { ...state, [action.field]: action.value };
  }
};

export const initialPasswordResetFormState: PasswordResetFormState = {
  email: "",
  password1: "",
  password2: "",
  auth: "",
};

export interface PasswordResetFormState {
  email: string;
  password1: string;
  password2: string;
  auth: string;
}

export enum PasswordResetActionCase {
  GENERAL = "GENERAL",
}

export type PasswordResetAction = {
  case: PasswordResetActionCase.GENERAL;
  value: string;
  field: string;
};

解决方案 #

执行以下命令安装React的TypeScript类型定义文件：

npm install --save @types/react

内容的提问来源于stack exchange，提问作者Legand