Redux Actions：TypeScript枚举成员是否具备唯一性？

我之前在JS转TS的混合项目里也碰到过几乎一模一样的情况，Redux用枚举定义Action类型，调试时看到action.type是字符串形式，但TS类型检查或者分支匹配总出问题，给你几个实用的解决思路：

1. 优先用字符串枚举替代数字枚举 #

数字枚举编译后是数字值，但混合开发里JS代码大概率会直接传字符串类型的action.type，这就会导致switch分支不匹配，TS类型也会报错。改成字符串枚举就完全适配：

// 正确的字符串枚举定义
export enum ActionTypes {
  SIGNED_IN = 'SIGNED_IN',
  LOG_OUT = 'LOG_OUT',
  // 其他Action类型
}

这样ActionTypes.SIGNED_IN编译后就是字符串'SIGNED_IN'，和调试里看到的action.type完全一致，TS也能正确识别类型。

2. 给Action定义明确的类型接口 #

每个Action都要指定type为对应的枚举成员，再把所有Action合并成联合类型：

// 单个Action的类型
interface SignedInAction {
  type: ActionTypes.SIGNED_IN;
  payload: {
    userId: string;
    username: string;
  };
}

interface LogOutAction {
  type: ActionTypes.LOG_OUT;
}

// 所有Action的联合类型
type AppAction = SignedInAction | LogOutAction;

3. 给Reducer指定正确的Action类型 #

别用默认的AnyAction，把Reducer的action参数类型设为我们定义的AppAction，这样TS会自动在switch分支里推断payload的类型：

interface AppState {
  isAuthenticated: boolean;
  user?: { userId: string; username: string };
}

const initialState: AppState = {
  isAuthenticated: false,
};

function appReducer(state = initialState, action: AppAction): AppState {
  switch (action.type) {
    case ActionTypes.SIGNED_IN:
      // 这里TS会自动识别action.payload的类型
      return {
        ...state,
        isAuthenticated: true,
        user: action.payload,
      };
    case ActionTypes.LOG_OUT:
      return {
        ...state,
        isAuthenticated: false,
        user: undefined,
      };
    default:
      return state;
  }
}

4. 创建Store时指定类型约束 #

如果用的是Redux Toolkit（推荐在TS项目里用），创建Store时可以自动推断类型；如果是旧版createStore，要手动指定State和Action类型，避免默认的AnyAction干扰：

import { configureStore } from '@reduxjs/toolkit';
import appReducer from './reducers';

const store = configureStore({
  reducer: appReducer,
});

// 导出全局的State和Dispatch类型，方便组件里用
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

5. 混合开发时的JS代码兼容 #

如果有JS代码触发Action，要确保type字段和枚举的字符串值完全一致，比如JS里写：

// JS代码里触发Action
store.dispatch({
  type: 'SIGNED_IN', // 和枚举里的SIGNED_IN值完全匹配
  payload: { userId: '123', username: 'erik' }
});

这样既能被TS的Reducer正确识别，也不会破坏现有JS代码的逻辑。

内容的提问来源于stack exchange，提问作者Erik Živković