分享一下我自己针对 React+Redux 项目的 TS 配置。

TS 对 Redux 项目最大的加成是代码提示。运用 discriminated unions 技巧，可以在写 reducer / dispatch 逻辑的时候，获得体贴入微的代码提示体验。

目标效果

针对 reducer，对不同的 action.type，我们希望获得不同的 action.payload 内容的提示。

function reducer(state: DefaultRootState, action: IAction): DefaultRootState {
  switch (action.type) {
      case ACT.SAY_HELLO:
          return { ...state, msg: action.payload.msg }
      case ACT.INC_BY:
          return { ...state, count: state.count + action.payload.count }
      default:
          return state
  }
}

针对 dispatch，希望调用的时候，能够对 payload 做字段类型检查。

dispatch({ type: ACT.SAY_HELLO, payload: { msg: 'foobar' } })
dispatch({ type: ACT.INC_BY, payload: { msg: 'foobar' } })  // ERROR!

如何获得以上效果？配置如下。

TS 配置

1. 创建 `src/typings/action.d.ts` 文件，内容：

declare const enum ACT {
  SAY_HELLO = "SAY_HELLO",
  INC_BY = "INC_BY",
}

type IActionPayloadMapping = {
  [ACT.SAY_HELLO]: { msg: string };
  [ACT.INC_BY]: { count: number };
};

type IActionPayload<T> = T extends keyof IActionPayloadMapping
  ? IActionPayloadMapping[T]
  : any;

type IAction = {
  [key in keyof typeof ACT]: {
    type: typeof ACT[key];
    payload?: IActionPayload<typeof ACT[key]>;
  };
}[keyof typeof ACT];

首先我们用一个全局的 const enum ACT 来记录 action type，然后用一些技巧动态地构建一个 union type IAction, 它的最终内容是形如：

type IAction = {
    type: ACT.SAY_HELLO,
    payload: {
        msg: string
    }
} | {
    type: ACT.INC_BY,
    payload: {
        count: number
    }
};

这样一个复杂的 type 手写是不现实的，所以才用以上技巧动态的去构建它。我们只需要更新 enum ACT，以及往 IActionPayloadMapping 里加入对应的 payload 就好，这样写起来会舒服很多。

2. 创建 `src/typings/state.d.ts` 文件，内容：

interface IState {
  count: number;
  msg: string;
}

这里我们声明 redux store state 的字段内容，我自己偏好在单独的一个 .d.ts 文件内声明，因为一般这块的内容比较繁琐庞杂。

3. `src/store.ts` 集成以上工具类型：

import { createStore } from "redux";
import { DefaultRootState } from "react-redux";

declare module "react-redux" {
  // 要点一:
  interface DefaultRootState extends IState {}
  // 要点二:
  export function useDispatch(): <T extends IAction>(action: T) => T;
}

// 要点三:
function reducer(state: DefaultRootState, action: IAction): DefaultRootState {
  switch (action.type) {
    case ACT.SAY_HELLO:
      return { ...state, msg: action.payload.msg };
    case ACT.INC_BY:
      return { ...state, count: state.count + action.payload.count };
    default:
      return state;
  }
}

const store = createStore(reducer);
export default store;

要点一:

用 declaration merging 技巧把字段声明注入到 "react-redux" 库内预留的空白 interface DefaultRootState 里头。这个空白的 interface 就是官方推荐如此使用的，可见于源码的 comment.

通过注入的方式，我们把自定义的 IState 的字段类型声明，成功地混入了 DefaultRootState 中。由于 DefaultRootState 在 "react-redux" 库内部被 useSelector<T=DefaultRootState>() 引用为 generic T 的默认值，我们之后调用 useSelector(state => {...}) 的时候，这里的 state 参数的类型会默认采用 DefaultRootState，其实也就是我们自定义的 IState 的类型。

要点二:

同时我们要改写 useDispatch() 函数签名 (function signature). 使得它接受的参数 action 符合 extends IAction 的限制。这里的 IAction 就是前面我们在 action.d.ts 文件内动态构建的那个 union type.

这一步非常重要，因为之后我们在项目内会经常用到 const dispatch = useDispatch(), 我们需要通过改写的方式，把 IAction 的信息喂给 TS 引擎，之后它才能帮我们做类型检查和代码提示。

要点三:

也是最后一步，把 DefaultRootState 和 IAction 都用到 reducer() 的函数签名上。从此你写 reducer 函数的时候就有 action.payload 内容的代码提示啦。

最终成果

直接上图：

reducer: 每个 switch-case 分支内 action.payload 都是不一样的

dispatch: 故意犯错被抓现形

两者都是运用了 TS 的一个重要语言特性，discriminated unions。原理上，简而言之，IAction = A | B | ... | Z 有多种可能，但是 A-Z 有一个共同的字段是 "type", 你在 case 这里已经声明了一个具体 type 的值，那 TS 就能够以此帮你定位到 A-Z 中某一个具体的可能值，并帮你找出它对应的 action.payload 的类型，给到你代码提示和类型检查了。