vue3+vuex+typescript 自动推导store的state的类型

原创
2021/06/13 21:55
阅读数 2.1K

vuex4 提供了key来实现强类型,但需要开发者自己定义state类型,使用modules的时候会非常不便, 稍微研究了一下typescript的类型, 可以实现从多个modules中推导出root state的类型。

第一步:将所有store组织成modules

const modules = {
  categories,  //store a
  plugins //store b
}

第二步:通过infer获取单个store的state的类型

note: 当类型 T 兼容 { state: infer S }时,返回state的类型S

type StoreState<T> = T extends { state: infer S } ? S : T
// 原始类型为:{ state: { a, b... }
// StoreState<T>为: { a, b... }

第三步:替换modules的value的类型,重新组织成正确的类型

//  替换类型T的value的类型成StoreState
type ModulesState<T> = {
  [key in keyof T]: StoreState<T[key]>
}
export type State = ModulesState<typeof modules>;
// 原始类型为: { categories: { state: { cateA, cateB ... };
// 新类型State为:{ categories: { cateA, cateB ... };

完整代码:

import { InjectionKey } from 'vue';
import { createStore, Store } from 'vuex'
import categories from "./categories"
import plugins from "./plugins"

const modules = {
  categories,
  plugins
}

type StoreState<T> = T extends { state: infer S } ? S : T

type ModulesState<T> = {
  [key in keyof T]: StoreState<T[key]>
}

export type State = ModulesState<typeof modules>;

export const key: InjectionKey<Store<State>> = Symbol();


export default createStore<State>({
  modules
})

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部