收到 Typescript 错误说，某些类型不能分配给“ReducerWithoutAction<any>”类型的参数？

Question

我正在构建一个练习表格，并使用useReducer() 来管理状态。我得到的 Typescript 错误与它有关，我已经尝试解决它但没有运气。

完整代码可在此处获得（路径：src/components/Input.tsx）： CodeSandbox

完全错误：

/form/src/components/Input.tsx(47,47) 中的 TypeScript 错误： 没有重载匹配此调用。 Overload 1 of 5, '(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]'，给出以下错误。 '(state: InputState, action: InputAction) => { value: string | 类型的参数不明确的; isValid: 布尔值 |不明确的;触摸：布尔值； }' 不可分配给“ReducerWithoutAction”类型的参数。 TS2769

45 | const Input: React.FC<Props> = (props) => {
46 |     console.log(props.required);
47 |     const [inputState, dispatch] = useReducer(inputReducer, {
   |                                              
48 |         value: props.initialValue,
49 |         isValid: false,
50 |         touched: false

Answer 1

这是因为InputAction 有属性value 和isValid 作为可选（他们有?）。这使得InputAction 相当于：

interface InputAction {
    value: string | undefined;
    isValid: boolean | undefined;
    touched: boolean;
}

与InputState各自的属性无关：

interface InputState {
    value: string,
    isValid: boolean,
    touched: boolean
}

您可以通过根据需要设置ActionInput 的相应属性（删除?）或将InputState 的属性设置为可选来解决此错误。