TypeScript 2.8条件类型与Redux中间件：类型安全实现方案问询

哇，这个基于TypeScript 2.8 ReturnType特性实现Redux类型安全的方案真的很精妙！我来帮你拆解下这个方案的核心逻辑，再聊聊条件类型和Redux中间件结合的实践思路。

咱们先看你给出的类型定义，这几个类型的组合完美解决了Redux中手动维护action联合类型的痛点：

// actions/types.ts
type FunctionType = (...args: any[]) => any;
type ActionCreatorsMapObject = { [actionCreator: string]: FunctionType };
export type ActionUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;

逐个拆解下：

• FunctionType：是一个通用的函数类型约束，用来兜底所有action creator的结构——不管action creator接收什么参数、返回什么值，都符合这个类型。
• ActionCreatorsMapObject：定义了action creator对象的规范，键是action creator的名称，值必须是符合FunctionType的函数。
• ActionUnion<A>：这是整个方案的核心！通过ReturnType<A[keyof A]>，TypeScript会自动遍历传入的action creator对象的所有属性，提取每个action creator的返回类型，最终生成一个action类型的联合类型。

举个完整的实践例子，补全你的代码片段：

// models/user.ts
export interface User {
  id: number;
  username: string;
  name: string;
}

// actions/index.ts
import { User } from '../models/user';
import { ActionUnion } from './types';

// 定义具体的action creators
export const userActionCreators = {
  fetchUserSuccess: (user: User) => ({
    type: 'FETCH_USER_SUCCESS',
    payload: user
  } as const), // 用as const让TypeScript保留字面量类型，避免type被推断为string
  fetchUserFailure: (error: string) => ({
    type: 'FETCH_USER_FAILURE',
    payload: error
  } as const)
};

// 自动生成所有user action的联合类型
export type UserAction = ActionUnion<typeof userActionCreators>;

这样一来，不管你新增、修改哪个action creator，UserAction都会自动更新，完全不用手动维护联合类型，而且在reducer或者dispatch的时候，TypeScript会精准推断action的类型：

// reducer示例
function userReducer(state: User | null = null, action: UserAction): User | null {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      // 这里action.payload会被自动推断为User类型，完全类型安全
      return action.payload;
    case 'FETCH_USER_FAILURE':
      return null;
    default:
      return state;
  }
}

TypeScript 2.8新增的条件类型（比如ReturnType就是内置的条件类型），可以让Redux中间件的类型系统变得更智能。咱们以常用的异步中间件（比如redux-thunk）为例，看看怎么结合条件类型增强类型安全：

1. 用条件类型区分同步/异步Action #

首先定义thunk action的类型，再用条件类型来判断传入的action是同步action还是异步thunk：

import { Action, Dispatch } from 'redux';

// 定义thunk action的标准类型
type ThunkAction<R, S, E, A extends Action> = (
  dispatch: Dispatch<A>,
  getState: () => S,
  extraArgument: E
) => R;

// 条件类型：判断是否是thunk action
type IsThunk<T> = T extends ThunkAction<any, any, any, any> ? true : false;

// 增强后的dispatch类型，自动识别同步/异步action
type EnhancedDispatch<S, E, A extends Action> = <R>(
  action: A | ThunkAction<R, S, E, A>
) => IsThunk<typeof action> extends true ? R : void;

这样，当你dispatch一个返回Promise的thunk时，TypeScript会自动推断出它的返回值是Promise；如果dispatch同步action，返回值就是void，完全符合实际逻辑。

2. 用条件类型提取Action的Payload #

条件类型还可以用来快速提取action的payload类型，在中间件或者reducer中复用：

// 条件类型：提取action的payload类型，如果没有payload则返回never
type ActionPayload<T extends Action> = T extends { payload: infer P } ? P : never;

// 在中间件中使用，比如日志中间件
const loggerMiddleware = (store: any) => (next: Dispatch) => (action: Action) => {
  if ('payload' in action) {
    const payload: ActionPayload<typeof action> = action.payload;
    console.log(`Action ${action.type} payload:`, payload);
  }
  return next(action);
};

这种方式避免了手动写重复的payload类型定义，而且类型推断精准，不会出现类型不匹配的问题。

总的来说，你这个方案的最大优势就是完全基于代码生成类型，避免手动维护的冗余和错误，结合TypeScript 2.8的条件类型，还能进一步扩展Redux生态中各个部分的类型安全能力，非常实用！

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