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

Posted 2023-02-22

【中文标题】用于键入 vuex 商店的通用类型

【英文标题】：Generic type for typing vuex store

【发布时间】：2021-02-26 09:43:33

【问题描述】：

我正在尝试创建一个泛型类型，它将证明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

→ 突变名称

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

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

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

错误：(7, 3) TS2322：类型 '(state: DiceGameState, payload: number) => void' 不可分配给类型 '(state: DiceGameState, payload: number | DiceHistoryItem) => void'。 参数 'payload' 和 'payload' 的类型不兼容。 输入'号码 | DiceHistoryItem' 不可分配给类型 'number'。 类型“DiceHistoryItem”不可分配给类型“数字”。

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

示例：

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

TypeScript 提供的 addEventListenr 方法也是一个很好的例子。此类型根据给定的事件名称(type)推断事件 (ev)的类型：

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

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

【问题讨论】：

您为突变常量指定了两种不同的类型。很可疑！错误发生在哪一行？

@RafaelPizao 是十字路口类型我是故意这样做的。我在问题描述中添加了一条错误消息

【参考方案1】：

其实是可以的。我花了一些时间来弄清楚我做错了什么，但最后我明白了我的错误。

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

我们可以看到 Expanded 表明 p 其实是一个字符串，但它应该是字符串 Literals 'ADD_DICE_HISTORY_ITEM' | 'DECREMENT_ROUND' | 'INCREMENT_SCORE' 的并集>。您可能会认为也许我应该使用keyof DiceGameMutationsKeys 而不是keyof typeof DiceGameMutationsKeys，它将引用此接口的键名而不是键的类型，但这当然发生了预期的错误。这让我觉得我应该以某种方式更改我的通用 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] 因此它将在K 键下查找U 的类型（U 键接口的字符串文字联合之一）

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