正确输入 vuex getter 的 getters 参数

Question

如何正确键入引用其他 getter 的 vuex getter？例如：

import { GetterTree } from 'vuex';

class State {
    foo: string[] = [];
}

const getters = <GetterTree<State, any>>{
    bar: state => state.foo.filter(...something...),
    baz: (state, getters) => getters.bar.filter(...something else...)
}

这里getters.baz 的getters 参数由vuex 定义键入为any。如果它可以基于const getters 声明隐式键入为{ bar: string[] }，而不必将其声明为接口等两次，那就太好了。有没有办法做到这一点？

Answer 1

我们来看看GetterTree接口：

export interface GetterTree<S, R> {
  [key: string]: Getter<S, R>;
}

因此，state => state.foo.filter(...something...) 对应于 Getter<S, R>。

不幸的是，第二个参数getters 不是通用的，默认输入为any：

export type Getter<S, R> = (state: S, getters: any, rootState: R, rootGetters: any) => any;

来自GetterTree 的通用参数R 对应于rootState，这对我们来说并不有趣。

我看到了两个选项。

首先 - 最简单。

只需将显式类型添加到第二个参数：

const getters: GetterTree<State, any> = {
  bar: state => state.foo.filter(e => e.length > 1),
  baz: (state, getters: { bar: string[] }) => getters.bar
}

第二个，是覆盖GetterTree内置的实用程序类型。

import { GetterTree, Getter } from 'vuex';

class State {
  foo: string[] = [];
}

type CustomGetter<T extends Getter<any, any>, Getters> =
  T extends (state: infer State, getters: infer _, rootState: infer RootState, rootGetters: infer RootGetters) => any
  ? (state: State, getters: Getters, rootState: RootState, rootGetters: RootGetters) => any
  : never

type CustomGetterTree<T extends GetterTree<any, any>, Getters> = T extends GetterTree<infer S, infer R> ? {
  [key: string]: CustomGetter<Getter<S, R>, Getters>;

} : never

const getters: CustomGetterTree<GetterTree<State, any>, { bar: string[] }> = {
  bar: state => state.foo.filter(e => e.length > 1),
  baz: (state, getters /** {  bar: string[];} */) => getters.bar
}

Playground