前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断。

TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断。

作者头像
ssh_晨曦时梦见兮
发布2020-10-15 16:47:38
2.2K0
发布2020-10-15 16:47:38
举报
文章被收录于专栏:前端从进阶到入院

前言

前几天,TypeScript 发布了一项 4.1 版本的新特性,字符串模板类型,还没有了解过的小伙伴可以先去这篇看一下:TypeScript 4.1 新特性:字符串模板类型,Vuex 终于有救了?

本文就利用这个特性,简单实现下 Vuex 在 modules 嵌套情况下的 dispatch 字符串类型推断,先看下效果,我们有这样结构的 store

代码语言:javascript
复制
const store = Vuex({
  mutations: {
    root() {},
  },
  modules: {
    cart: {
      mutations: {
        add() {},
        remove() {},
      },
    },
    user: {
      mutations: {
        login() {},
      },
      modules: {
        admin: {
          mutations: {
            login() {},
          },
        },
      },
    },
  },
})

需要实现这样的效果,在 dispatch 的时候可选的 action 字符串类型要可以被提示出来:

代码语言:javascript
复制
store.dispatch('root')
store.dispatch('cart/add')
store.dispatch('user/login')
store.dispatch('user/admin/login')

实现

定义函数骨架

首先先定义好 Vuex 这个函数,用两个泛型把 mutationsmodules 通过反向推导给拿到:

代码语言:javascript
复制
type Store = {
  // 下文会实现这个 Action 类型
  dispatch(action: Action): void
}

type VuexOptions = {
  mutations: Mutations
  modules: Modules
}

declare function Vuex<Mutations, Modules>(
  options: VuexOptions
): Store<Mutations, Modules>
复制代码

实现 Action

那么接下来的重点就是实现 dispatch(action: Action): void 中的 Action 了,我们的目标是把他推断成一个 'root' | 'cart/add' | 'user/login' | 'user/admin/login' 这样的联合类型,这样用户在调用 dispatch 的时候,就可以智能提示了。

Action 里首先可以简单的先把 keyof Mutations 拿到,因为根 store 下的 mutations 不需要做任何的拼接,

重头戏在于,我们需要根据 Modules 这个泛型,也就是对应结构:

代码语言:javascript
复制
modules: {
   cart: {
      mutations: {
         add() { },
         remove() { }
      }
   },
   user: {
      mutations: {
         login() { }
      },
      modules: {
         admin: {
            mutations: {
               login() { }
            },
         }
      }
   }
}

来拿到 modules 中的所有拼接后的 key

推断 Modules Keys

先提前和大伙同步好,后续泛型里的:

  • Modules 代表 { cart: { modules: {} }, user: { modules: {} } 这种多个 Module 组合的对象结构。
  • Module 代表单个子模块,比如 cart

利用

代码语言:javascript
复制
type Values = {
  [K in keyof Modules]: Modules[K]
}[keyof Modules]

这种方式,可以轻松的把对象里的所有 类型给展开,比如

代码语言:javascript
复制
type Obj = {
  a: 'foo'
  b: 'bar'
}

type T = Values // 'foo' | 'bar'

由于我们要拿到的是 cartuser 对应的值里提取出来的 key

所以利用上面的知识,我们编写 GetModulesMutationKeys 来获取 Modules 下的所有 key

代码语言:javascript
复制
type GetModulesMutationKeys = {
  [K in keyof Modules]: GetModuleMutationKeys
}[keyof Modules]

首先利用 K in keyof Modules 来拿到所有的 key,这样我们就可以拿到 cartuser 这种单个 Module,并且传入给 GetModuleMutationKeys 这个类型,K 也要一并传入进去,因为我们需要利用 cartuser 这些 key 来拼接在最终得到的类型前面。

推断单个 Module Keys

接下来实现 GetModuleMutationKeys,分解一下需求,首先单个 Module 是这样子的:

代码语言:javascript
复制
cart: {
   mutations: {
      add() { },
      remove() { }
   }
},

那么拿到它的 Mutations 后,我们只需要去拼接 cart/addcart/remove 即可,那么如何拿到一个对象类型中的 mutations

我们用 infer 来取:

代码语言:javascript
复制
type GetMutations = Module extends { mutations: infer M } ? M : never

然后通过 keyof GetMutations,即可轻松拿到 'add' | 'remove' 这个类型,我们再实现一个拼接 Key 的类型,注意这里就用到了 TS 4.1 的字符串模板类型了

代码语言:javascript
复制
type AddPrefix = `${Prefix}/${Keys}`
复制代码

这里会自动把联合类型展开并分配,{'cart'}/ {'add' | 'remove'} 会被推断成 'cart/add' | 'cart/remove',不过由于我们传入的是 keyof GetMutations 它还有可能是 symbol | number 类型,所以用 Keys & string 来取其中的 string 类型,这个技巧也是老爷子在 Template string types MR 中提到的:

Above, a keyof T & string intersection is required because keyof T could contain symbol types that cannot be transformed using template string types.

代码语言:javascript
复制
type AddPrefix = `${Prefix & string}/${Keys & string}`
复制代码

那么,利用 AddPrefix> 就可以轻松的把 cart 模块下的 mutations 拼接出来了。

推断嵌套 Module Keys

cart 模块下还可能有别的 Modules,比如这样:

代码语言:javascript
复制
cart: {
   mutations: {
      add() { },
      remove() { }
   }
   modules: {
      subCart: {
        mutations: {
          add() { },
        }
      }
   }
},

其实很简单,我们刚刚已经定义好了从 Modules 中提取 Keys 的工具类型,也就是 GetModulesMutationKeys,只需要递归调用即可,不过这里我们需要做一层预处理,把 modules 不存在的情况给排除掉:

代码语言:javascript
复制
type GetModuleMutationKeys =
  // 这里直接拼接 key/mutation
  | AddPrefix>
  // 这里对子 modules 做 keys 的提取
  | GetSubModuleKeys

利用 extends 去判断类型结构,对不存在 modules 的结构直接返回 never,再用 infer 去提取出 Modules 的结构,并且把前一个模块的 key 拼接在刚刚写好的 GetModulesMutationKeys 返回的结果之前:

代码语言:javascript
复制
type GetSubModuleKeys = Module extends { modules: infer SubModules }
  ? AddPrefix>
  : never

以这个 cart 模块为例,分解一下每个工具类型得到的结果:

代码语言:javascript
复制
cart: {
   mutations: {
      add() { },
      remove() { }
   }
   modules: {
      subCart: {
        mutations: {
          add() { },
        }
      }
   }
},

type GetModuleMutationKeys =
    // 'cart/add' | 'cart | remove'
    AddPrefix> |
    // 'cart/subCart/add'
    GetSubModuleKeys

type GetSubModuleKeys = Module extends { modules: infer SubModules }
   ? AddPrefix<
       // 'cart'
       Key,
       // 'subCart/add'
       GetModulesMutationKeys
   >
   : never

这样,就巧妙的利用递归把无限层级的 modules 拼接实现了。

完整代码

代码语言:javascript
复制
type GetMutations = Module extends { mutations: infer M } ? M : never

type AddPrefix = `${Prefix & string}/${Keys & string}`

type GetSubModuleKeys = Module extends { modules: infer SubModules }
   ? AddPrefix>
   : never

type GetModuleMutationKeys = AddPrefix> | GetSubModuleKeys

type GetModulesMutationKeys = {
   [K in keyof Modules]: GetModuleMutationKeys
}[keyof Modules]

type Action = keyof Mutations | GetModulesMutationKeys

type Store = {
   dispatch(action: Action): void
}

type VuexOptions = {
   mutations: Mutations,
   modules: Modules
}

declare function Vuex<Mutations, Modules>(options: VuexOptions): Store<Mutations, Modules>

const store = Vuex({
   mutations: {
      root() { },
   },
   modules: {
      cart: {
         mutations: {
            add() { },
            remove() { }
         }
      },
      user: {
         mutations: {
            login() { }
         },
         modules: {
            admin: {
               mutations: {
                  login() { }
               },
            }
         }
      }
   }
})

store.dispatch("root")
store.dispatch("cart/add")
store.dispatch("user/login")
store.dispatch("user/admin/login")
复制代码

前往 TypeScript Playground 体验。

结语

这个新特性给 TS 库开发的作者带来了无限可能性,有人用它实现了 URL Parser 和 HTML parser,有人用它实现了 JSON parse 甚至有人用它实现了简单的正则,这个特性让类型体操的爱好者以及框架的库作者可以进一步的大展身手,期待他们写出更加强大的类型库来方便业务开发的童鞋吧~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 实现
    • 定义函数骨架
      • 实现 Action
        • 推断 Modules Keys
          • 推断单个 Module Keys
            • 推断嵌套 Module Keys
            • 完整代码
            • 结语
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档