React+TypeScript中useReducer函数的类型标注错误问题

1. 修正类型定义，明确Action联合类型 #

首先确保你的ToDoAction覆盖所有可能的action类型，避免TypeScript无法识别完整的action分支：

// 类型定义文件
interface ToDo {
  id: number;
  text: string;
  completed: boolean;
}

type ToDoArray = ToDo[];

// 用联合类型明确所有action的结构
type ToDoAction =
  | { type: 'ADD_TODO'; payload: string }
  | { type: 'TOGGLE_TODO'; payload: number }
  | { type: 'DELETE_TODO'; payload: number };

2. 完善reducer函数，覆盖所有分支并确保返回状态 #

reducer必须处理ToDoAction的每一种类型，且必须添加default分支返回当前状态，彻底避免返回undefined的情况：

function todoReducer(todos: ToDoArray, action: ToDoAction): ToDoArray {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...todos,
        {
          id: Date.now(),
          text: action.payload,
          completed: false,
        },
      ];
    case 'TOGGLE_TODO':
      return todos.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return todos.filter(todo => todo.id !== action.payload);
    // 兜底分支，确保任何未匹配的action都返回当前状态
    default:
      return todos;
  }
}

3. 正确调用useReducer，明确泛型参数（可选但更清晰） #

调用useReducer时显式指定状态和action的类型，让TypeScript正确识别reducer的类型，避免匹配到ReducerWithoutAction：

import { useReducer } from 'react';

function App() {
  const initialState: ToDoArray = [];
  // 显式声明泛型，明确reducer的参数和返回值类型
  const [todos, dispatch] = useReducer<(state: ToDoArray, action: ToDoAction) => ToDoArray>(
    todoReducer,
    initialState
  );

  // 示例dispatch调用
  const handleAddTodo = (text: string) => {
    dispatch({ type: 'ADD_TODO', payload: text });
  };

  return (
    <div>
      <button onClick={() => handleAddTodo('New Todo')}>Add Todo</button>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}
          />
          <span>{todo.text}</span>
          <button onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default App;

错误原因解析 #

• 类型不匹配：之前的useReducer未正确识别action类型，导致TypeScript误将reducer推断为不需要action的ReducerWithoutAction类型。通过明确action联合类型并指定泛型，可让TypeScript正确匹配reducer的类型。
• 返回undefined：当reducer遇到未定义的action类型时，无返回值会默认返回undefined，违反了useReducer要求reducer必须返回状态类型的规则。添加default分支返回当前状态即可解决。

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