尝试将 TypeScript 添加到 useReducer 钩子时解析错误？

Question

我正在尝试了解如何将 TypeScript 与 useReducer 挂钩一起使用。这是一个使用常规 JavaScript 的简单计数器：

function reducer(state, action) {
  switch (action.type) {
    case "+":
      return { ...state, no: state.no + 1}
    case "-":
      return { ...state, no: state.no - 1}
    default:
      throw new Error("All conditions missed");
  }
}

function App() {

  const [state, dispatch] = React.useReducer(reducer, {no: 1})

  return (
    <div className="App">
      <h1>{state.no}</h1>
      <button type="button" onClick={()=>dispatch({type: "-"})}>-</button>
      <button type="button" onClick={()=>dispatch({type: "+"})}>+</button>
    </div>
  );
}

https://codesandbox.io/s/zealous-austin-eog2p

我尝试添加类型，但出现解析错误：

interface IState {
  no: string;
}

function reducer(state: IState[], action) {
  switch (action.type) {
    case "+":
      return { ...state, no: state.no + 1}
    case "-":
      return { ...state, no: state.no - 1}
    default:
      throw new Error("All conditions missed");
  }
}

function App() {

  const [state, dispatch] = React.useReducer(reducer, {no: 1}: IState[])

  return (
    <div className="App">
      <h1>{state.no}</h1>
      <button type="button" onClick={()=>dispatch({type: "-"})}>-</button>
      <button type="button" onClick={()=>dispatch({type: "+"})}>+</button>
    </div>
  );
}

https://codesandbox.io/s/patient-forest-1gp88

Answer 1

供参考，useReducer() 的签名是

type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
type Dispatch<A> = (value: A) => void;
function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
  initializer?: undefined,
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

看起来像

interface IState {
  no: number;
}

const reducer: React.Reducer<IState, any> = (state: IState, action) => {
  switch (action.type) {
    case "+":
      return { ...state, no: state.no + 1 };
    case "-":
      return { ...state, no: state.no - 1 };
    default:
      throw new Error("All conditions missed");
  }
};

// ...
const [state, dispatch] = React.useReducer(reducer, { no: 1 });

解析、类型检查和运行良好——与您的版本不同：

• 接口中的no 是一个数字（需要使reducer 中的算术有意义，以及初始状态）。
• reducer 是一个显式类型的箭头函数。