用于键入 vuex 商店的通用类型

Question

我正在尝试创建一个通用类型，它将证明Vuex突变的输入提示。我读了这篇文章Vuex + TypeScript，我受到启发去创建更通用的东西。我想出了这样的事情：

export type MutationType<S, P, K extends keyof P> = Record<K, (state: S, payload: P[K]) => void>;

// S
export type DiceGameState = {
  round: number;
  score: number;
  diceItems: DiceHistoryItem[];
};

// P
export interface DiceGameMutationPayloadMap {
  INCREMENT_SCORE: number;
  DECREMENT_ROUND: number;
  ADD_DICE_HISTORY_ITEM: DiceHistoryItem;
}

// K
export enum DiceGameMutationsKeys {
  INCREMENT_SCORE = 'INCREMENT_SCORE',
  DECREMENT_ROUND = 'DECREMENT_ROUND',
  ADD_DICE_HISTORY_ITEM = 'ADD_DICE_HISTORY_ITEM'
}

export type DiceStoreMutation = MutationType<
  DiceGameState,
  DiceGameMutationPayloadMap,
  keyof typeof DiceGameMutationsKeys
>;

export const mutations: MutationTree<DiceGameState> & DiceStoreMutation = {
  DECREMENT_ROUND: (state: DiceGameState, payload: number) => {},
  INCREMENT_SCORE: (state: DiceGameState, payload: number) => {},
  ADD_DICE_HISTORY_ITEM: (state: DiceGameState, payload: DiceHistoryItem) => {}
};

在哪里：

• S? 突变状态的类型
• P? 分配给此突变的突变名称和有效负载类型的映射
• K? 突变名称

如果我MutationType在 IDE 中查看详细信息，则会收到以下提示：

因此，此对象中的K键是键之一，值是一种方法，该方法采用类型为 的状态S和类型为分配值的有效负载P。

如果我尝试编译此代码，则会收到此错误：

错误：（7, 3）TS2322：类型“（状态：DiceGameState，有效载荷：数字）=>无效”不能分配给类型“（状态：DiceGameState，有效载荷：数字| DiceHistoryItem）=>无效”。参数“payload”和“payload”的类型不兼容。输入'号码| DiceHistoryItem' 不可分配给类型 'number'。类型 'DiceHistoryItem' 不能分配给类型 'number'。

你知道我怎样才能让我的泛型工作吗？

例子：

我想让 TS 推断给定突变名称的有效载荷类型。例如，如果您有一个名为的突变，INCREMENT_SCORE那么TSpayload 提示的类型应该是一个数字。这就是我创建这个的原因：DiceGameMutationPayloadMap，然后在创建这个const mutations. 打字稿应该告诉我有效载荷应该有什么类型（基于变异的名称）。

一个很好的例子也可以是addEventListenrTypeScript 提供的方法输入。这种类型推断的类型事件（ev）基础上给定的事件名称（type）：

addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLButtonElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

有关此类型的更多详细信息，您应该查看lib.dom.ts ？6385线

Answer 1

事实上，这是可能的。我花了一些时间才弄清楚我做错了什么，但最终我明白了我的错误。

我的第一个错误是在里面DiceStoreMutation，因为这个泛型的第三个参数引用了键的类型，没有键名称。我们可以在随附的屏幕截图中看到这一点的证明：

我们可以看到Expanded显示它p实际上是一个字符串，但它应该是 string Literals 的并集'ADD_DICE_HISTORY_ITEM' | 'DECREMENT_ROUND' | 'INCREMENT_SCORE'。您可能会认为也许我应该使用keyof DiceGameMutationsKeys而不是keyof typeof DiceGameMutationsKeys引用此接口的键名称而不是键的类型，但这当然发生了预期的错误。这让我觉得我应该MutationType以某种方式改变我的通用性。在我阅读了 @Joel Bourbonnais 的答案并检查了这个关于该P[K]部分是Index types. MutationType我为我的: Mapped generics+想出了一个新主意Index types。这种新类型提出了这种形状：

export type MutationType<T, U> = {
  [K in keyof U]: (state: T, payload: U[K]) => void;
};

我只能说一件事，它确实是一种享受。现在我什至不需要，DiceGameMutationsKeys因为DiceGameMutationPayloadMap提供了所有信息。你可能会问为什么？我已经急着解释了：

• 首先，K in keyof UsoK只能是Uso的一个键，它将是keys接口的字符串文字的联合U。
• 其次，这将是在键下U[K]查找类型（键接口的字符串文字的联合之一）UKU

您可以在下面找到带有证据的屏幕截图：