typescript - 用于键入 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 的类型.
如果我尝试编译此代码，则会收到此错误:

Error:(7, 3) TS2322: Type '(state: DiceGameState, payload: number) => void' is not assignable to type '(state: DiceGameState, payload: number | DiceHistoryItem) => void'.Types of parameters 'payload' and 'payload' are incompatible.Type 'number | DiceHistoryItem' is not assignable to type 'number'.Type 'DiceHistoryItem' is not assignable to type 'number'.

你知道我怎样才能让我的通用工作吗？
例子:
我想让 TS 推断给定突变名称的有效负载类型。例如，如果您有一个名为 INCREMENT_SCORE 的突变。那么 payload 的类型 暗示 by TS 应该是一个数字。这就是我创建这个的原因: DiceGameMutationPayloadMap ，然后在创建此 const mutations . typescript 应该告诉我有效载荷应该有什么类型(基于突变的名称)。
一个很好的例子也可以输入 addEventListenr TypeScript 提供的方法。此类型推断 的类型事件 ( ev ) 基于给定的 事件名称 ( type):

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

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

Answer 1

实际上，这是可能的。我花了一些时间来弄清楚我做错了什么，但最后我明白了我的错误。
我的第一个错误是在 DiceStoreMutation 里面因为我的这个泛型的第三个参数引用了 key 类型没有键名。我们可以在随附的屏幕截图中看到这一点的证明:

我们可以看到展开 显示 p 实际上是一个字符串，但它应该是字符串 Literals 的并集'ADD_DICE_HISTORY_ITEM' | 'DECREMENT_ROUND' | 'INCREMENT_SCORE' .你可能会认为也许我应该使用 keyof DiceGameMutationsKeys而不是 keyof typeof DiceGameMutationsKeys这将引用此接口(interface)的键名而不是键的类型，但这当然发生了预期的错误。这让我觉得我应该改变我的通用 MutationType 不知何故。在我阅读@Joel Bourbonnais 的答案并检查此 very good example 之后关于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 U所以K只能是 U 的键所以它将是 U 的字符串文本的联合按键界面。

其次，U[K]所以它将查找 U 的类型下K键(U 键接口(interface)的字符串文字联合之一)

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