JS转TypeScript后dispatch隐式any类型问题咨询

Great question! Let's break this down into two key parts: defining the correct type for dispatch, and whether disabling noImplicitAny is a wise choice.

What's the Correct Type for dispatch? #

The exact type depends on which state management library you're using (or if you're using React's built-in useReducer). Here are the most common scenarios:

1. Redux or Redux Toolkit #

If you're using Redux (especially with Redux Toolkit), you have two solid options:

• Generic Dispatch type: Import the base Dispatch type from Redux or Redux Toolkit and use it directly:

  import { Dispatch } from '@reduxjs/toolkit';
  
  const updateUser = (dispatch: Dispatch) => {
    dispatch({ type: 'user/update', payload: { name: 'Hesam' } });
  };
  

• App-specific Dispatch type: For better type safety (especially with async thunks), create a type that matches your store's exact dispatch capabilities:

  import { configureStore } from '@reduxjs/toolkit';
  import userReducer from './slices/userSlice';
  
  const store = configureStore({
    reducer: {
      user: userReducer,
    },
  });
  
  // Define a type that matches your store's dispatch
  type AppDispatch = typeof store.dispatch;
  
  // Use this type for your functions
  const fetchUser = (dispatch: AppDispatch) => {
    dispatch(fetchUserThunk()); // TypeScript will validate the thunk is valid
  };
  

2. React useReducer #

For React's built-in useReducer, you'll first define your action types, then use React's Dispatch type with those actions:

import { useReducer, Dispatch } from 'react';

// Define your state and action types
type TodoState = { id: number; text: string; completed: boolean }[];
type TodoAction =
  | { type: 'add'; payload: string }
  | { type: 'toggle'; payload: number };

// Your reducer function
const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'add':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'toggle':
      return state.map(todo => 
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      throw new Error('Unknown action');
  }
};

const TodoList = () => {
  const [todos, dispatch] = useReducer(todoReducer, []);

  // If passing dispatch to a helper function, explicitly type it
  const handleAddTodo = (text: string, dispatch: Dispatch<TodoAction>) => {
    dispatch({ type: 'add', payload: text });
  };

  return (
    <div>
      <button onClick={() => handleAddTodo('Learn TypeScript', dispatch)}>Add Todo</button>
    </div>
  );
};

Should You Disable noImplicitAny? #

Short answer: No, you shouldn't.

Disabling noImplicitAny turns off one of TypeScript's most valuable checks. It lets implicit any types slip through, which defeats the purpose of using TypeScript—you lose type safety, autocompletion, and early error detection. Over time, this will lead to more bugs and make your codebase harder to maintain.

Instead of disabling the check, take the time to define the correct type for dispatch as shown above. It's a small upfront effort that pays off with cleaner, safer code long-term.

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