React-Redux项目中TypeScript语句useAppDispatch里的=作用解析

首先明确：export const useAppDispatch: () => AppDispatch = useDispatch这行代码不是类型转换，而是给Redux原生Hook useDispatch创建了一个带具体类型约束的别名，核心作用是让组件里的dispatch自动支持Redux Toolkit增强后的类型（比如异步thunk）。

拆解代码各部分的作用： #

• 类型约束部分：: () => AppDispatch
  • AppDispatch是通过typeof store.dispatch推导出来的类型，包含了Redux Toolkit中间件（如thunk）增强后的dispatch能力，而原生useDispatch默认返回的基础Dispatch类型不支持异步操作。
  • 这里是给变量useAppDispatch指定类型：它是一个无参数函数，返回值类型为AppDispatch。
• 赋值部分：= useDispatch
  • 直接将Redux原生的useDispatch Hook赋值给useAppDispatch，相当于给原Hook套了一层类型“壳”。后续在组件中调用useAppDispatch()时，得到的dispatch会自动携带异步thunk的类型支持，无需每次手动指定类型。

为什么你的修改会报错？ #

你改成的export const useAppDispatch: () => useDispatch as AppDispatch完全不符合TypeScript语法：

• () =>后面必须跟类型，而useDispatch是一个函数实例（值），不是类型，TypeScript无法识别这种写法。
• 类型标注的逻辑是给整个变量指定类型，而非在返回值位置混用值和类型断言。

补充：useAppSelector的同理逻辑 #

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector也是同样思路：

• TypedUseSelectorHook<RootState>是Redux提供的泛型类型，用来给useSelector绑定全局的RootState类型。
• 这样后续调用useSelector(state => state.xxx)时，state会自动推导为你的RootState，无需每次手动传入泛型参数。

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