玩转 TS - 实现 dva 的完整类型推导

2021-06-08

前言

在 TypeScript 4.1 来临之前，对于像 dva、vuex 这种需要在触发时写入命名空间的函数，我们无奈的只能使用 any 对其进行类型定义。

dispatch({  
  type: "users/getUser",  
  payload: "...", // any  
})

这使得项目中本应良好的 TS 类型推导出现了断层，社区中也有相关的解决方案，但都是通过更加复杂类型、函数封装进而实现的，与官方写法大相径庭。

好在，TypeScript 4.1 带来了 Template Literal Types 特性，是我们可以对类型进行字符串拼接操作，从而使得此类函数的类型推导称为现实。

本文将带你一一讲解具体的推导过程，希望看完之后会有收获。

同时，本文的最终实现已经发布了 npm 包：dva-type，可以在项目中直接安装使用。

Dva 基本使用

写代码之前先让我们回顾一下 dva 的基本使用，也好让我们知道自己最终要实现什么。

Model 定义

dva 中通过定义 model 来声明各模块的状态，其中 reducers 就是 redux 的 reducers，effects 就是用来执行异步操作的地方，在 effect 中最终也会通过 reducers 将状态更新到 state 中。

cosnt model = {  
  state: {},  
  effects: {  
    getList() {}  
  }  
  reducers: {  
    merge() {}  
  }  
}

基本使用

使用方法同 redux

使用 connect 高阶函数或者 useSelector 来获取 state
使用 connect 或者 useDispatch 拿到 dispatch 函数

connect((state) => ({  
  userInfo: state.users.info,  
}))  

// 类型断层  
dispatch({  
  type: "users/getUser",  
  payload: false,  
})

类型断层主要在于 dispatch 时的 action 类型无法推导，state 的类型提示则没有问题，而 action 之所以会失效主要在于参数 type 需要拼接命名空间。

所以我们要解决的其实就是拼接命名空间之后的类型提示和推导，而这在 Template Literal Types 特性出现之后，就使得解决方案变得异常简单与自然。

Dva-type

开始 dva-type 的源码解析之前，先看一下它是如何使用的

Dva-type 使用

定义单个 Model 类型（注意 Model、Effect 不是从 dva 中导入的）

import { Effect, Model } from "dva-type"  

interface ListModel extends Model {  
 state: {  
   list: any[]  
 }  
 effects: {  
   // 定义effect 传入 payload 类型  
   getList: Effect<number>  

   // 不需要 payload 的 effect  
   getInfo: Effect  
 }  
}

定义项目中所有 Model 的集合（使用 type 而不是 interface）

// 使用 type 定义 models，将项目中的所有 model 进行收集  
type Models = {  
 list: ListModel  
 info: InfoModel  
 // ...  
}

将 Models 传入 ResolverModels 获取 state 和 actions 的类型

import { ResolverModels } from "dva-type"  

type State = ResolverModels<Models>["state"]  
type Actions = ResolverModels<Models>["actions"]

使用

// hooks  
useSelector<State>()  
const dispatch = useDispatch<(action: Actions) => any>()  

// class  
const mapStateToProps = (state: State) => {}  
interface Props {  
 dispatch: (action: Actions) => any  
}

Dva-type 源码解析

从上面的使用中可以看到，一切的秘密都在 ResolverModels 这个类型中，下面我们就看看其实现

interface ResolverModels<T extends Record<string, Model>> {  
  state: ResolverState<T> & Loading<T>  
  actions: ResolverReducers<T> | ResolverEffects<T>  
}

提取 State

state 的解析很简单，使用 keyof 遍历 models 的 state 定义即可。

type ResolverState<T extends Record<string, Model>> = UnionToIntersection<{  
  [k in keyof T]: T[k]["state"]  
}>

这是基本操作，让我们大致过一下这个过程发生了什么

T 是我们传入的 Models 类型定义
[k in keyof T] 相当于遍历了 T 的键：list、info
T[k]['state'] 相当于：T['list']['state’]、T['info']['state’]

这样就把 state 的类型给推导出来了，但是推导出来的类型是联合类型，我们还需要将其转换为交叉类型才能正确进行类型提示。

联合类型转换交叉类型

而将联合转换为交叉类型则是网上找到的黑魔法：

type UnionToIntersection<U> =  
  (U extends any ? (k: U) => void : never)  
    extends (k: infer I) => void  
    ? I  
    : never

具体的深层原理我也没有搞懂，但是可以看一下具体做了那些事情：

U extends any ? (k: U) => void : never
- extends any 这个条件永远是 true，所以这里就是把传入的类型 U 变为了函数类型：(k: U) => void
extends (k: infer I) => void
- 第一步我们把类型变为了 (k: U) => void，所以这里的 extends 的判断结果肯定也是 true。
- 注意 infer I，这将类型 U 重新做了推断，就是这一步使联合类型变为了交叉类型。
? I : never
- 很明显，根据第一个和第二步，这里的三元表达式永远都会返回 I。
- 至此，联合类型被转换为了交叉类型。

提取 Actions

dva 提供的 Effect 类型不能传入 payload 的类型定义，所以这里我们需要封装一个 Effect 出来：

type Effect<P = undefined> = (  
  action: { type: any; payload?: P },  
  effect: EffectsCommandMap  
) => void

解析 `effects` 类型

type ResolverEffects<T extends Record<string, Model>> = ValueType<{  
  [t in keyof T]: ValueType<{  
    [k in keyof T[t]["effects"]]: T[t]["effects"][k] extends (  
      action: { type: any; payload?: infer A },  
      effect: EffectsCommandMap  
    ) => void  
      ? A extends undefined  
        ? {  
            type: `${t}/${k}`  
            [k: string]: any  
          }  
        : {  
            type: `${t}/${k}`  
            payload: A  
            [k: string]: any  
          }  
      : never  
  }>  
}>

代码一大坨，按流程走一遍：

T 依然是传入的 Models 类型
[t in keyof T] 同 state，不再赘述。
[k in keyof T[t]['effects']]，这一步就是将每个 model 中定义的 effect 进行了遍历，相当于：Models['list']['effects']['getList’]、Models['info']['effects']['getInfo’]
T[t]['effects'][k] extends (action: { type: any; payload?: infer A },effect: EffectsCommandMap) => void
- extends 后面的函数类型与我们定义的 Effect 类型一致
- 注意 extends ... payload?: infer A …，这里将 payload 的类型提取了出来
A extends undefined，这一步是为了判断 effect 是否需要传入 payload，如果不需要则不需要在类型中体现
```
{  
 type: `${t}/${k}`  
 payload: A  
}  
```
1. payload: A 这个就是将推导出来的类型又赋值回去了
2. type: ${t}/${k}，其中 t 表示了命名空间，k 表示了 effect 的名称：type: 'list/getList'

至此，类型已经推导出来了，但是格式却不是我们想要的：

{  
 list: {  
   getList: {  
     type: 'list/getList',  
     payload: number  
   }  
 }  
}

我们只想要最里面的 {type: .. payload ..} 部分，所以这里要做的就是将 value 的类型提取出来，做法也非常简单：T[keyof T]，遍历并访问类型的键就可以将值类型全部取出。
将其简单封装，就是最外层的 ValueType 的作用了。

effects 的类型提取出来了，reducers 也是同样的做法，就不赘述了。

Dva-loading 类型

dva-loading 中可以根据 effects 提供 loading 变量，我们解析了 effects 之后，loading 的变量提示也是顺其自然了

interface Loading<T extends Record<string, Model>> {  
  loading: {  
    global: boolean  
    models: {  
      [k in keyof T]: boolean  
    }  
    effects: {  
      [k in ResolverEffects<T>["type"]]: boolean  
    }  
  }  
}

End

OK，感谢看到这里，希望看完之后对你有所提升，

lei4519 / blog