Getting a Typescript error saying, some type is not assignable to parameter of type 'ReducerWithoutAction<any>'?

Question

I am building a form for practice and am using useReducer() to manage the state. The Typescript error I am getting relates to it, I have tried solving it but no luck.

The full code is available here (Path: src/components/Input.tsx): CodeSandbox

Full Error:

TypeScript error in /form/src/components/Input.tsx(47,47): No overload matches this call. Overload 1 of 5, '(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', gave the following error. Argument of type '(state: InputState, action: InputAction) => { value: string | undefined; isValid: boolean | undefined; touched: boolean; }' is not assignable to parameter of type '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

It's because InputAction has properties value and isValid as optional (they have ?). That makes InputAction equivalent to:

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

which will not relate with InputState's respective properties:

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

You can solve this error by either setting ActionInput's respective properties as required (removing ?) or setting those of InputState as optional.