如何在TypeScript中为import.meta.glob推断正确的模块类型？

问题出在你手动把modules和reducers的类型指定成了宽泛的Record<string, Reducer>，TypeScript根本没法识别各个Slice的具体状态类型。直接上解决方案：

1. 修正reducer/index.ts的类型定义 #

删掉手动指定的宽泛类型，让TypeScript自动推断每个模块的具体类型，再用工具类型构造精确的RootReducer结构：

import { Reducer } from '@reduxjs/toolkit'

// 不手动指定类型，让TS自动推断所有Slice模块的完整类型
const modules = import.meta.glob('./*Slice.ts', { eager: true })

// 工具类型：从模块路径里提取Slice名称（比如userSlice.ts → user）
type SliceModule = typeof modules
type SliceNames = keyof SliceModule extends `./${infer Name}Slice.ts` ? Name : never

// 构造精确的Reducer对象类型：键是Slice名称，值是对应Reducer的具体类型
type RootReducer = {
  [K in SliceNames]: SliceModule[`./${K}Slice.ts`]['default']
}

// 初始化reducers并断言为精确类型
const reducers = {} as RootReducer

Object.entries(modules).forEach(([key, module]) => {
  const name = /(?<=\/).+?(?=Slice\.ts)/.exec(key)?.[0] || ''
  if (name && name in reducers) {
    reducers[name as SliceNames] = module.default
  }
})

export default reducers

2. store/index.ts无需改动 #

现在configureStore会根据reducers的精确类型自动推断RootState，原来的代码直接用就行：

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import reducer from './reducer'

const store = configureStore({ reducer })

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

export default store

为什么这样能解决问题？ #

• 去掉了modules的手动类型限制，TypeScript会保留每个Slice的Reducer的完整类型信息
• 通过工具类型从模块路径中提取Slice名称，构造出和手动导入完全一致的reducer对象类型
• 用as RootReducer告诉TSreducers的精确结构，确保RootState能正确推断出每个Slice的状态属性

改完之后，组件里用useAppSelector取state.user时，就能拿到和手动导入一样的完整属性提示了。

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