使用Redux、Immutable.js与TypeScript时避免useSelector类型断言

问题根源 #

你遇到的类型断言问题，本质是Immutable.js的toJS()方法返回类型为any，且Reducer状态未用TypeScript正确约束，导致TypeScript无法自动推断转换后的数据类型。以下是具体优化步骤：

1. 正确定义Reducer的Immutable状态类型 #

用Immutable的Record替代直接用Map包裹初始状态，Record能提供固定结构的强类型约束，让TypeScript清晰识别状态的键值类型：

import { Record, Map, List } from 'immutable';
import { Email } from './你的类型文件';

// 定义原始状态结构
interface EmailsStateRaw {
  loading: boolean;
  emails: Map<string, List<Email>>;
  error: string | null;
}

// 创建Immutable Record类型
const EmailsState = Record<EmailsStateRaw>({
  loading: false,
  emails: Map<string, List<Email>>(),
  error: null,
});

// 导出强类型的状态类型
export type EmailsState = ReturnType<typeof EmailsState>;

// 初始化Reducer状态
const initialState = new EmailsState();

// 重写emailsReducer，明确状态输入输出类型
const emailsReducer = (state: EmailsState = initialState, action: EmailAction): EmailsState => {
  switch (action.type) {
    case EMAILS_FETCH_REQUEST:
      return state.set('loading', true).set('error', null);
    case EMAILS_FETCH_SUCCESS:
      return state
        .set('loading', false)
        .setIn(['emails', action.meta], List(action.payload.data));
    // 其他case逻辑...
    default:
      return state;
  }
};

2. 编写类型安全的转换工具函数 #

统一处理toJS()的类型转换，将断言逻辑集中在工具函数中，避免组件内重复断言：

import { Iterable } from 'immutable';

/**
 * 类型安全的Immutable转JS对象函数
 * @param value Immutable集合对象
 * @returns 强类型的JS对象
 */
export function immutableToJS<T>(value: Iterable<any, any>): T {
  return value.toJS() as T;
}

3. 使用Reselect创建类型化选择器 #

用reselect（Redux官方推荐的选择器库）创建可复用、类型安全的选择器，替代组件内直接调用useSelector，同时还能缓存计算结果提升性能：

import { createSelector } from 'reselect';
import { RootState } from './store';
import { Conversation } from './你的类型文件';
import { immutableToJS } from './工具文件';

// 基础选择器：获取Raw Immutable状态
const selectConversationsState = (state: RootState) => state.conversations;
const selectEmailsState = (state: RootState) => state.emails;

// 转换后的选择器：返回强类型JS对象
export const selectSelectedConInfo = createSelector(
  selectConversationsState,
  (conversations) => immutableToJS<Conversation>(conversations.get('selectedConInfo'))
);

export const selectEmailsMap = createSelector(
  selectEmailsState,
  (emailsState) => immutableToJS<Record<string, Email[]>>(emailsState.get('emails'))
);

// 组合选择器：自动推导当前邮件列表类型
export const selectCurrentEmails = createSelector(
  selectSelectedConInfo,
  selectEmailsMap,
  (selectedConInfo, emailsMap) => {
    return selectedConInfo ? emailsMap[selectedConInfo.id] || [] : [];
  }
);

4. 组件中无断言使用选择器 #

在组件中直接调用预定义的选择器，TypeScript会自动推断正确类型，无需手动断言：

function EmailArea() {
  const dispatch = useDispatch();
  const selectedConInfo = useSelector(selectSelectedConInfo);
  const currentEmails = useSelector(selectCurrentEmails);
  
  // 此时selectedConInfo类型为Conversation，currentEmails类型为Email[]
}

额外注意事项 #

• 确保RootState由combineReducers的返回值自动推导，不要手动硬编码：

  export const rootReducer = combineReducers({
    emails: emailsReducer,
    conversations: conversationsReducer, // 确保这个reducer也做了同样的类型约束
  });
  
  export type RootState = ReturnType<typeof rootReducer>;
  

• 避免在Reducer中混用普通JS对象和Immutable对象，保持状态一致性，否则会增加类型推断复杂度。

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