useReducer in TypeScript, strictly typed version

interface Action<T extends string, P = undefined> { type: T payload: P } type Actions = | Action<'increment', { by: number }> | Action<'decrement', { by: number }> | Action<'reset', { to: number }> type Reducer<S, A extends Action<any, any>> = (s: S, a: A) => S const INITIAL_STATE = { count: 0, } as const const reducer: Reducer<typeof INITIAL_STATE, Actions>(state, action) => { switch (action.type) { case 'increment': return { count: state.count + action.payload.by }; case 'decrement': return { count: state.count - action.payload.by }; case 'reset': return { count: action.payload.to }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement', payload: { by: 1 })}>-</button>  <button onClick={() => dispatch({ type: 'increment', payload: { by: 1 }})}>+</button>  <button onClick={() => dispatch({ type: 'reset', payload: { to: 0 } })}>+</button>  </>  ); }